HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML basics

An HTML document, no matter how simple or complex, will contain certain fundamental things. These things are what make HTML work the way it does and they are present in the HTML code of EVERY page on the web!

This tutorial focuses on:

Tags

Using tags, the browser knows which content to display and when.

There are tags for many different things including text, links, images, tables, form elements, and much more. When your situation requires it, use the tag(s) you need. For example, to display italic text you would use the <i> tag.

Example:
<i>this text will be italic</i> and this text will not
Output:
This text will be italic and this text will not

In the above example, once we no longer need to display italic text, we used the complementary end tag for the <i> tag which is </i>. The end tag is the same as the opening tag but with a / character after the first angle bracket.

Common HTML tags with their closing tags:
<p>paragraph text</p> (used for paragraphs) <h1>heading text</h1> (used for headings) <body>page content</body> (used to display the content of a webpage) <head>page info</head> (used to store information about a webpage such as the page title)

Some tags (very few) do not have a closing tag. With such tags, you would use the / symbol at the end of the tag (right before the > symbol) instead of using a closing tag.

Tags without a closing tag:
<br /> (short for break, used to display line breaks on a page) <img /> (short for image, used to display images on a page) <input /> (used to display form fields)

NOTE: ALL Tags should be kept lowercase! This is the modern HTML standard.

Remember that HTML has lots of tags for many different things! You will be learning all about the various HTML tags throughout our HTML tutorials. It's going to get exciting :)

Attributes

Tags are used to display content but what about the specifics of that content like if a link should open in a new window or the location of an image? Attributes are used to specify things like this regarding the content on your webpages. Attributes are located within tags.

NOTE: Attributes are located in start tags only, not in end tags.

Example:
<a href="http://www.yahoo.com" target="_blank">Yahoo!</a>
Output:

The tag from the above example (<a>) is used for displaying links. The href attribute sets the link to point to http://www.yahoo.com and the target attribute sets where the link will open (in this case, a new window).

Attributes are specified with special keywords relative to the tags they're placed in and take the value that you set. Do not worry right now about specific uses of attributes for different tags like in the above example, various attributes as well as the tags they are used in will be discussed in detail in further tutorials in this section. The important thing for now is that you understand the concept of attributes.

Attribute rules:

  1. Always quote attribute values
  2. Use lowercase letters for attributes and attribute values

Elements

An element is anything that appears on a webpage. An element could be a table, a link, a textbox, a heading, etc. The paragraph you're reading right now is an element and so is the heading right above it.

An element consists of the grouping of a start tag, the element content, and an end tag.

Element example:
<h1>This is a heading element</h1>
Output:

This is a heading element

Element parts from the above example:
<h1> - start tag This is a heading element - element content </h1> - end tag

What about tags that don't have an end tag? How do they fit into the whole element scheme?

Tags that don't have an end tag are the element. For example, the <img> tag which is used to display an image doesn't have an end tag but the image it displays is the element.

Example using the <img> tag:
<img src="images/sky.jpg" />
Output:

As you can see in the above example, the <img> tag is the element. It just needs the right value to be set for it's src attribute to display the image.

Elements within elements

Elements can also have other elements within them.

Example:
<p>Here is a <a href="http://www.google.com">link</a> </p>
Output:
Here is a link

In the above example, we have a link element (<a>) nested inside of a paragraph element (<p>)

Comments

Comments don't affect the code and will not be displayed on a page but serve an important purpose - they are declared so that code would be easier to understand and navigate.

Comments are used to explain what is happening in the code and this is very useful in many situations like if you come back to your code after not working on it for a while or if you start working with someone else's code. Comments simplify things and create better organization allowing you to work faster and more efficiently.

Comments can be placed anywhere within the code, can span as many lines as you want, and are declared with a starting <!-- and an ending -->

Example:
<!-- get the users first name --> <input type="text" name="name" />
Output:

Notice how in the above example only the textbox appears, not the comment, but the comment makes it clear what the purpose of the textbox is.

NOTE: Using too many comments could slow your pages down!

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information