Creating an HTML document is easy. To begin coding HTML you need a simple-text editor. Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it. HTML has not been around for many years. November 1990 marks the day of the first web page and back then there were little to no HTML standards to be followed. A group called the World Wide Web Consortium was then formed and have since set the standards that are widely accepted and we will base our teachings around them. Web pages have many uses. Here are some important facts about why web pages are so useful.
Element - A complete tag, having an opening <tag> and a closing </tag>.
Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.
For now just know that a tag is a command the web browser interprets, an element is a complete tag, and an attribute customizes or modifies HTML elements.An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.
<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.
If you haven't already, open up Notepad and have a new, blank document ready to go. Copy the following HTML code into your text editor.
Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "firstpage.html", without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes.If you opened up your firstpage.html document, you should be starring at your very first blank (white) web page!
The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next.
As of yet, we still have nothing happening on the web page. All we have so far is a couple of necessary elements that describe our document to the web browser.
Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code:
Save the file and open it in your browser. You should see "My First WebPage!" in the upper-left, as the window's title.
The <body> element is where all content is placed. As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content.
A web browser reads an HTML document top to bottom, left to right. Each time the browser finds a tag, it is displayed accordingly (paragraphs look like paragraphs, tables look like tables, etc). Tags have 3 major parts: opening tag(s), content(s), and closing tag(s). Recall that a completed tag is termed an element. By adding tags to an HTML document, you signal to the browser "Hey look, I'm a paragraph tag, now treat me as such."As you will learn, there are probably hundreds of HTML Tags. Tables, images, lists, forms, and everything else being displayed on an web page requires the use of a tag or two.
Tags should be lower-case letters if you plan on publishing your work. This is the standard for XHTML and Dynamic HTML. Here's quick look at some HTML tags.
Tags Without Closing Tags
There are a few tags that do not follow the mold above. In a way, they still have the 3 parts (opening/closing and content). These tags however do not require a formal </closingtag> but rather a modified version. The reason being that these tags do not really require any content. Rather some of them just need a source URL and this is enough information for the web browser to display the tag properly (image tags)
- A cheap and easy way to spread information to a large audience.
- Another medium to market your business.
Element - A complete tag, having an opening <tag> and a closing </tag>.
Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.
For now just know that a tag is a command the web browser interprets, an element is a complete tag, and an attribute customizes or modifies HTML elements.An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.
- <p> - opening paragraph tag
- Element Content - paragraph words
- </p> - closing tag
The <html>...</html> Element
<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.
If you haven't already, open up Notepad and have a new, blank document ready to go. Copy the following HTML code into your text editor.
HTML Code:
<html> </html>
The <head> Element
The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next.
HTML Code:
<html> <head> </head> </html>
The <title> Element
Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code:
HTML Code:
<html> <head> <title>My First WebPage!</title> </head> </html>
The <body> Element
The <body> element is where all content is placed. As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content.
HTML Code:
<html> <head> <title>My First WebPage!</title> </head> <body>Hello World! All my content goes here!</body> </html>
HTML Code:
<openingtag>Content</closingtag> <p>A Paragraph Tag</p>
HTML Code:
<body>Body Tag (acts as a content shell) <p>Paragraph Tag</p> <h2>Heading Tag</h2> <b>Bold Tag</b> <i>Italic Tag</i> </body>
There are a few tags that do not follow the mold above. In a way, they still have the 3 parts (opening/closing and content). These tags however do not require a formal </closingtag> but rather a modified version. The reason being that these tags do not really require any content. Rather some of them just need a source URL and this is enough information for the web browser to display the tag properly (image tags)
