Writing HTML From Scratch
Writing HTML is by no means a complex process. HTML is formed by opening and closing "tags." The opening of a tag is denoted by the tag wrapped around in brackets. For example: <strong>. You close the tag by placing a "/" in front of the tag name (</strong>). In order to make something bold, place <strong></strong> tags around the text you want emphasized. Here is an example. Anything in <strong>between the strong tags</strong> becomes bold.
HTML isn't only limited to making text bold. There are a variety of HTML tags that increase the functionality of the website dramatically. For a list of all the tags you can use, it is recommended that you check the extended resources for a list of references for covering HTML in detail. The primary tags we'll be using in this section are:
| Tag | Function |
|---|---|
| <head> | Includes other files, set up web page properties. |
| <title> | Title your web document |
| <body> | Display Your content |
| <h1> | Headers to break up your content into specific parts |
| <p> | Organize paragraphs and block your content |
| <a> | Link to other web pages or within your own document |
| <img> | Place images within your documents |
Head Tag <head>
The Head Tag rests at the top of the page. Information including meta tags and extra source files are linked within the head tag. Cascading StyleSheets as well as Javascript are linked within the head tag. No information within the head tag is directly viewed by the visitor. HTML you write within the head tag will affect your visitors, but the code won't be directly viewable.
Title Tag <title>
The Title Tag enables you to give a title to your HTML document. This tag will cause whatever text you enter to appear at the top of browser window. This tag tells your visitors as well as the search engine what your page is about.
Body Tag <body>
The Body tag is where your website's content goes. Unlike the Head tag, any information you place within the body tag will be viewable to your visitors. Only one Body tag is needed within your document. All content in your document goes within this tag.
Header Tags <h1> through <h6>
Header tags are headlines which you can use throughout your document. Headlines are important as they can break up your document into specific sections. This allows visitors to quickly scan your website and find the information they're looking for. The Header tags also allow the search engines to gauge what your site is about. By using proper header tags, you can effectively give the search engines and visitors an idea of your web page's content.
Header tags are numbered in reverse order in relation to their hierarchy. The most important header tag is the <h1> tag. The <h1> tag should only be used once on the entire page and it denotes what your page is about. Having more than one <h1> tag can confuse both your visitors and the search engines as to what your web page is focused on. The other heading tags (<h2>,<h3>,<h4>,<h5>,<h6>) are subheadings all underneath the <h1> tag and they can be used to break up your web page into different sections with different content.
Paragraph Tag <p>
The Paragraph tag is used to create, format and manage paragraphs of text. It is formed by opening and closing the paragraph tag <p> around paragraphs of content. The benefit of using the paragraph tag is that you can stylize whole sections of content using a Cascading StyleSheet. This can aid in enhancing the overall readability of your website.
Anchor Tag <A>
The Anchor tag is the primary tag used for linking from one page to another. Making a link to another page is relatively easy. The syntax is as follows:
The "<a" tells the browser you're creating an Anchor tag. The "href=" stands for "hyper reference." This is the location of the file, image, document or website you're linking. After you've completed the opening Anchor tag with ">", anything that comes after will display as the Anchor text or link name. You can then close the link by closing the Anchor tag.
For instance, if you wanted to make a link to the main page (http://websiteincite.com), with the link name "Website Incite" you would use the following syntax:
This would display as: Website Incite
You can also link to files on your website by using a relative link:
Anchor tags can also link to specific points on the page. To link to a specific place on the page you use the similar syntax as before:
Note that there's the "#" symbol at the beginning of the position. This denotes you're linking to a point within the document. You can place your position in the HTML document by using the following syntax:
Instead of using "href" after the opening of the anchor tag, we use "name." Name denotes the position that you want to link to. It's important to make sure that the names of each tag is the absolute same. Case-sensitivity matters. If you're mixing capitals and lowercase letters in one link and not the other, the anchor tag may not work.
Image Tag <img>
To place an image on a web page use the <img> tag. It's very similar to the anchor tag. However, instead of using "href" to link a web page, the Image tag uses "src" (stands for "source") to link to a picture. To place an image in your web page use the following syntax:
To link to an image within another folder you can use the following syntax:
Like the Anchor tag, case-sensitivity also matters with the image tag. Your picture is unlikely to display correctly if your link is not exactly the same or you have mixed uppercase and lowercase letters.
To allow people with images disabled to understand what the image you're linking to, there is "alternate text." Alternate text is a description of what the picture is about. To add in alternate text simply add alt="Alternate description text" to your image tag to explain the contents of the picture you're showing. The full text of the tag would appear like this: