How HTML Works (in a nutshell)

1
How HTML Works(in a nutshell)

• Presentation written by
• John D. Vernier
• Revised 3/27//2007

2
What is HTML?

• HTML is the language that allows for the
  universal exchange of information over the World
  Wide Web
• HTML stands for Hypertext Markup Language.
• HTML is not a programming language, it is a
  markup language. HTML simply consists of tags
  that tells a browser how to display a document.

3
Viewing an HTML file

• To view a web page, you need to have an internet
  browser such as Microsoft Internet Explorer or
  Mozilla Firefox.
• When you open a web page in a browser, the
  browser takes the HTML code and interprets it
  into pictures, multimedia files, and styled text.

4
HTML text file

• HTML is not a proprietary format, so you dont
  need special software to create your own web
  pages.
• HTML files are generally created in either a
  text-editing program (like Notepad) or in a
  special HTML Editor (like Dreamweaver).
• HTML files consist of text that you want to
  display as well as tags that tell the browser how
  you want things formatted.

5
3 Sections of an HTML file

• The HTML document can be broken down into 3
  parts the document itself, the HEAD, and the
  BODY.
• All HTML documents require at least three sets of
  tags the lthtmlgt tags, the ltheadgt tags, and the
  ltbodygt tags.
• These three sets of tags create the skeleton of
  what will eventually become a full-featured
  webpage.

6
3 Sections of an HTML file

• In fact, the most basic webpage in the world uses
  only these 3 tags as seen here.

7
3 Sections of an HTML file

• The HTML tags contain the webpage.
• The HEAD tags contain the title of the page,
  search engine META data, and scripting language
  functions.
• The BODY tags contain the body of the webpage, or
  what displays in a users browser when the page
  is viewed.

8
Empty Body Tag

• If we viewed our basic webpage in a browser,
  nothing would display
• The page is blank because while we used the
  correct tags, we didnt put anything in between
  the tags so there is no content to display.

9
Body Tag

• In order to actually view this page, we need to
  add content.
• Here, more content has been added. We added a
  page title using the lttitlegt tag and added some
  text into the BODY of the document.

10
Paragraph Tag

• Here is what our revised page looks like in a web
  browser.
• Notice how the three lines all ran together.
  Thats because HTML doesnt recognize spaces. If
  you want to create paragraphs you need to use the
  ltpgt tag.

11
Paragraph Tag

• In the next slide you can see that we have
  encapsulated our text within ltpgt tags to create
  paragraphs.
• You can use a variety of tags to style your text
  in many ways, as you will see later in this
  tutorial.

12
Paragraph Tag
13
Line Break Tag

• We saw how you can create paragraphs using the
  ltpgt tag.
• If you want a line break but do not want
  paragraphs, you can use the ltbr /gt tag.
• The ltbr /gt tag is known as an empty element since
  it contains both the start and end tags in one
  tag.

14
Line Break Tag
15
Heading Tags

• If you want a section of text to stand out, you
  can use a heading tag.
• There are six heading tags. lth1gt is the largest
  and lth6gt is the smallest.
• The smaller the h1 number, the larger the text.
• Therefore, lth2gt is smaller than lth1gt, but lth5gt is
  bigger than lth6gt.

16
Heading Tags
17
Anchor (link) tag

• You can use the ltagt tag to link to another page.
• When you use the ltagt tag, you use the src
  attribute to point to the website you want to
  link to.
• Here we can see how we could add a link to the
  HFCC website from our page.
• Clicking on the linked text will take you to the
  website located at http//www.hfcc.edu.

18
Anchor (link) tag
19
List tags

• HTML has two ways that you make a list.
• Unordered lists are made with the ltulgt tag and
  use bullets.
• Ordered lists are made with the ltolgt tag and use
  numbers.
• Individual list items are shown using the ltligt
  tag.

20
List tags
21
Horizontal Rule and Comments

• You can use the lthrgt tag to draw a line across
  the page. This is useful for creating sections to
  your page.
• You can create comments by using the lt! and the
  ? tags. Comments are simply notes that you make
  in your code and do not affect how the web page
  will display in a browser.

22
Horizontal Rule and Comments
23
Formatting Tags

• There are a few more tags that format text that
  we will now discuss.
• To make text bold, you use the ltbgt and lt/bgt tags.
• To make text italicized, you use the ltigt and lt/igt
  tags.
• To make text underlined, you use the ltugt and lt/ugt
  tags.
• The next slide shows examples of each.

24
Formatting Tags
25
Formatting Tags

• You can control the color and size of a font as
  well as the font face with the ltfontgt tag.
• To use the font tag, you need to use the tag as
  well as the attribute you want to change (size,
  face) and the value to change it to.
• An example would beltfont size12px
  colorbluegt
• The font tag is outdated and has been replaced
  with CSS, but the tag can still be used in HTML.

26
Formatting Tags
27
Image Tag

• You can insert images into your page using the
  ltimggt tag.
• The ltimggt tag uses the src attribute to point to
  the file to display.
• Make sure that the image you want to include is
  located in the same directory as the page calling
  it or it wont display.
• An example is ltimg srcfilename.jpggt

28
Image Tag
29
Body Tag Attributes

• You can specify a color or an image to use for a
  background. To specify a background, you add
  attributes to the ltbodygt tag of the document.
• To set a solid background color you would use the
  ltbody bgcolorcolorgt tag
• To set a background image you would use the ltbody
  backgroundimagenamegt tag

30
Body Tag Attributes
31
Table Tags

• You can create tables in HTML using the lttablegt
  tag.
• You can use the ltthgt tag to create table heading
  cells, the lttrgt tag to create new rows, and the
  lttdgt tag to create an individual cell.
• Tables are very useful for laying out your
  website, however nowadays designers are using CSS
  and ltdivgt tags for layouts. You can still use
  tables to create a layout, however.

32
Table Tags
33
GUI Web Authoring Tools

• Coding web pages by hand can be tedious work and
  is prone to errors.
• Many software packages are available that allow
  users to create web pages using a graphical
  interface (similar to MS Word)
• These programs allow you to create a web page or
  pages without knowing any HTML.
• Two examples are Microsoft FrontPage and
  Macromedia Dreamweaver.

34
GUI Web Authoring Tools
35
Summary

• There are many other things you can do with HTML,
  but to cover them all would be beyond the scope
  of this lesson.
• You have learned some of the basic HTML tags and
  how to use them.
• You also learned how you can use an HTML editor
  like Dreamweaver to create a page.
• You now have the tools and the knowledge to make
  your first web page.