| Vocademy |
Your web browser interprets HTML, so you don't need a web server to learn the language. You need only to type the following examples into a text file, save it as [something].html, then double-click the file to load it into your default browser. However, you will need access to a web server to run the scripts that interact with PHP scripts. You should type the scripts rather than copy and paste them because you learn through your hands.
Start by opening a text editor. You can use Windows Notepad (or TextEdit on the Mac) but Notepad++ is a poplar alternatve that helps you format your code by highlighting keywords. Any text editor can be used to learn HTML.
Type the following then save the file as page1.html on your desktop or somewhere else where you can easily find the file.
|
Hello World! |
Find the file and double click it. It will open in your default browser and print exactly what you typed on the screen.
That was easy, but a proper web page must tell the browser about itself. Add the following to your page then save it again then refresh the page in the browser (hit that little circle arrow in the upper left).
|
<!DOCTYPE html> <html> <head> <Title>My first web page</title> </head> <body> Hello World! </body> </html> |
This will result in exactly the same thing but the HTML police will be happy and give you a nice pat on the head.
The first line tells the browser that the page will be built according HTML 5 standards. The second tells the browser where the HTML code starts. The area between the <head> and </head> tags is for metadata about the page. The title tags print a title on the browser tab. Search engins also place some weight on the content of the title tag for determing what the page is about. Finally, you put the code to format the visible part of the webpage between the body tags. For the following examples we will leave these tags to reduce clutter.
Now let's make the text bold. Put <b> before the text and </b> after the text. Save the page then refresh the browser (edit, save, refresh, edit. save, refresh, lather, rinse, repeat every time you edit the code).
|
<b>Hello World!</b> |
Now your text is in boldface type. The <b> opening tag tells the browser to begin bold text and the </b> closing tag tells the browser to end bold text.
Now let's add a blank line and some another line of text (don't forget to save and refresh).
| <b>Hello
World!</b> This is a new line of text. |
Ok, where did the blank line go and why is everything on the same line? When interpreting HTML the web browser ignores whitespace. Whitespace consists of strings of multiple spaces (a single space is rendered), line break, tabs, etc. Therefore, when you load the above code into your browser, everything is rendered as a single line. You have to manually put line break tags into your code to force the browser to render line breaks. The line break tag is simply <br>. It is a stand-alone tag, having no closing tag. Add line breaks as shown below.
|
<b>Hello
World!</b><br> |
That looks much better. If you look at the source code for other web pages you may see the line break tag like this: <br />. This is the XHTML way of formatting stand-alone tags.[1] Not long ago XHTML was thought to be the future of web design and HTML police demanded XHTML formatting. With the advent of HTML 5, XHTML formatting has fallen into disuse.
The above is OK to get us started with the basics. However, it isn't kosher according to HTML 5 standards. According to HTML 5 conventions, all text should be between a set of opening and closing tags. As we will see later, you can put formatting parameters in tags that affect everything between the tags. Therefore, you should not use the <br> tag to create breaks between paragraphs. You should instead put the text between paragraph tags (<p> and </p>); the <br> tag should only be used where you need to break a line and not have a blank space between lines within a paragraph.
Likewise, the <b> tag for bold is considered obsolete because it theoretically doesn't convey meaning. Therefore, <strong>, which does the same thing, is preferred. Frankly, I don't care and use <b> all the time, but before the HTML police come knocking at the door, let's put on our best innocent faces and change our code to HTML 5 standards. Again, we'll leave the heading and footer off the code to reduce clutter, but don't forget that they should be there. We are just working between the <body> and </body> tags. Retype your code as follows, save, and refresh.
|
<h1>Hello World!</h1> <p>This is a new line of text.</p> |
Notice that we replaced the bold tags with a heading tag. The heading 1 tag (<h1>) gives us large, bold text and separates it from the lines above and below. You can use <h1> through <h6>. The <h1> tag gives large bold text. The sizes are progressively smaller with <h6> having small text. The title of this page uses <h1>, the subtitle uses <h2> and the section titles use <h2>.
The <p> tag creates a paragraph and puts blank lines between paragraphs.
Now let's do what web pages are famous for, linking to other pages.[2] Add the following to your page (shameless promotion follows).
|
<h1>Hello World!</h1> <p>This is a new line of text.</p> <p>Learn for free at <a href="https://vocademy.net">Vocademy</a>.</p> |
Here's the breakdown of that line of code. It says "Learn for free at Vocademy." To turn the word Vocademy into a link we have to enclose it inside an anchor tag pair (a for anchor). The opening tag designates the destination with the href parameter. Put the complete URL between the quotes after href=. The words you want to be clickable are between the tags. Here the period is after the closing tag so it isn't part of the clickable link.
To link to files in the same folder on your local disk, leave off the https://, like this: href="otherpage.html". If you are linking to a file on your local disk you can specify paths. For example, to link to a file in the parent directory the parameter looks like this: href="../anotherpage.html". This works too: href="/MoreFiles/yetanotherpage.html". If you are linking to pages on another website you must include the https://, etc. You can include it to link to pages on your own site too but can use direct links instead.
Now let's add a picture. This is done with the image tag as follows.
|
<h1>Hello World!</h1> <p>This is a new line of text.</p> <p>Learn for free at <a href="https://vocademy.net">Vocademy</a>.</p> <p><img src="https://vocademy.net/photo.jpg"></p> |
This will get you started but the HTML police demand a little more information as follows.
|
<h1>Hello World!</h1> <p>This is a new line of text.</p> <p>Learn for free at <a href="https://vocademy.net">Vocademy</a>.</p> <p> <img src="https://vocademy.net/photo.jpg" alt="A picture of something"> </p> |
This is for when the picture isn't rendered for some reason. Users see a bit of text describing the picture. Here we broke the code into multiple lines for readability. Remember that line breaks in the code are ignored so this makes no change in the final result.
Now let's turn that picture into a hyperlink. Just put the img tag inside an anchor tag as follows.
|
<h1>Hello World!</h1> <p>This is a new line of text.</p> <p>Learn for free at <a href="https://vocademy.net">Vocademy</a>.</p> <p> <a href="https://vocademy.net"> <img src="https://vocademy.net/photo.jpg" alt="A picture of something"> </a> </p> |
Now, click on the picture and it takes you to vocademy.net.
That's it for this lesson. Next we will look at some advanced formatting.
—————————
| Vocademy |