The basics of HTML

4 May

HTML… markups, web pages, angle brackets, elements, tags and so on… Do you also feel unable to cope with all the technology that is surrounding you?

Just have a look on the structured problem analysis and after that try to follow the first steps to learn HTML and CSS – It will help you!

An adoption of the Southwest Airlines graphic

1. Step:

Create an HTML-file using a simple text editor. The best choice using Windows is “Notepad” (in German: simply “Editor”).

2. Step:

Type in the text you want to use on your web page.

3. Step:

After typing in the needed text, save the file, but remember: use “All files” as document type!

4. Step:

Open the saved file in your browser, doing so, click on “file” and “open…”, then browse to you saved file and just open it. Here I used the Internet Explorer.

5. Step:

Structure your text by using Markup Magnets, where <h> stands for heading and <p> stands for paragraph. But pay attention also to close the magnets by using the slash “/” that indicates the end of the structure element.

6. Step:

Surround your html-text with html-tags, so that the browser can identify your markup language.

Additionally, restructure the text by indicating the title/head and the body of the text

7. Step:

Now you are ready for the second upload! Open your file again in your web browser and see what happens: The browser knows how to structure your document and identifies the elements, so the text is more structured and more readable.

8. Step:

Last but not least, it´s time to design your document! To have a better style on your page, use CSS in order to underline the structure by designing also the text.

You indicate, that your change the internet language by typing in: <style type=”text/css”>. After that some formatting expressions follow, that we hopefully will learn in the next few chapters. Finally you have to denote that the style commands are complete by using an ending magnet.

Did you manage to get the wanted result? If not, just try some good tutorials on youtube!

Try this one:

http://www.youtube.com/watch?v=RRvJ9ff0TUs
.

Advertisements

3 Responses to “The basics of HTML”

  1. rosepanama May 7, 2012 at 3:15 pm #

    Hey Sabrina!
    Great post! I like how you introduce a few simple basics about HTML!!
    The way you explain it is easy to understand and also you applied the A3 model very well!
    By the pictures you’ve chosen, it becomes easier to understand what you really mean. Also the structure of providing a list of the different steps contributes to a greater understanding! I tried to do it by myself and I am actually very impressed, how understandable HTML is. I always have been afraid of it, and thought that would only make sense to computer “nerds”. However, this is not true! I really enjoy having some basic knowledge about it.
    Finally, it’s great that you advice your readers to watch some YouTube videos to get a better understanding!

  2. angi2012 May 28, 2012 at 8:10 pm #

    Hi Sabrina,
    At this point I can only agree with Rose, very good article. What I personally like very much that you’ve tried it yourself. You have thought about your readers and have made each steps very well understood. Not only by the brief description, but also through images. Great job, I look forward to your next entry.

Trackbacks/Pingbacks

  1. My own business idea for an iphone app « hit the nail on the top - May 24, 2012

    […] probably just need some of the easy basics that Sabrina introduced to us in her “The basics of HTML“. So after taking this concern from you, you might want to know how it could be done, […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: