HcWjnyVHiTd8hN_8STvJ2rWaXvhPz4wXYCNGvD4qDkU
 
 
 

Introduction to HTML
Topic 12

Introduction

 

  1. Every webpage has the first page, homepage

    1. The name is either index.php or index.htm

    2. This is never included in the web address

    3. When you go to a website, www.nbc.com

    4. The web server directs you to the first page

  2. HTML is not an exact code

    1. Different browsers may display webpages differently

    2. Usually check the webpage for each browser

  3. You would never write pure html

    1. Use an html editor to create and design webpages

    2. Knowledge of HTML is handy, because editors make mistakes that must be fixed

    3. Should use a What You See Is What You Get (WYSIWYG) editor

    4. Free html editors

      • Amaya from W3C, www.w3.org/Amaya/

      • Sea Monkey from Mozilla, www.seamonkey-project.org/

      • KompoZer, http://www.kompozer.net/

      • BlueFish - for programmers; not a WYSIWYG editor

      • Note - many editors say they are free; entice you to buy the upgrade package like CoffeeCup; very limited editors

    5. HTML editors

      • Adobe Dreamweaver, the best

      • Microsoft Expression

  4. All HTML files require an open and close tag

    1. An open tag is <COMMAND>

    2. A closing tag is </COMMAND>

    3. The command tells the browser to do something

    4. Not all tags have a closing tag

      • Image tag, <img >

      • Return <br />

    5. All webpages start with <HTML> and end with </HTML>

      • Note - the very first line starts with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  5. Head tags

    1. These tags are never displayed

    2. Similar to a header, starts with <HEAD> and ends with </HEAD>

    3. The title tag

      • Starts with <TITLE> and ends with </TITLE>

      • Displays the title on the browser's window bar

      • Example:  <TITLE>Welcome to my Website</TITLE>

    4. Meta tags

      • Contains information about the webpage

      • Robots - search engines scan the webpage for information

      • The search engine can use the information in the meta tags

      • Common format

        1. <META NAME="KEYWORDS" CONTENT=keywords about webpage">

        2. <META NAME="DESCRIPTION" CONTENT="description about webpage">

        3. <META NAME="ROBOTS" CONTENT="ALL">

      • The last command gives the search engine permission to index webpage

 

Basic HTML Commands

 

  1. The page being displayed is shown between the tags, <BODY> and </BODY>

    1. You can add many properties to the body tag

    2. Note - this method is considered "old"

    3. Background image, is <BODY background="picture.jpeg">

      • Image is tiles, if it is too small

      • The picture is in the same folder as the webpage

    4. Can have a background color, <BODY bgcolor="#FFFFFF">

      • This is 32-bit color, RGB

      • FFFFF is white while 000000 is black

      • Modern browsers will take blue, green, lime, etc.

    5. Can have a color scheme for fonts

      • Similar color scheme

      • Fonts on webpage depend on purpose

      • regular text is <BODY text="#000000">

      • hyperlink is <BODY link="red">

      • An active link, you clicked on it and waiting for new page to load, <BODY alink="green">

      • A visited link, <BODY vlink="green">

    6. Note - all these commands can be placed within BODY tag

  2. Editing style is similar Word

    1. Bold has two methods, use tags <b> and </b> or <strong> and </strong>

    2. Italics has two methods, use tags <i> and </i> or <em> and </em>

    3. Underline, use tags <u> and </u>

    4. Superscripts are <sup> and </sup>

    5. Subscripts are <sub> and </sub>

    6. Fonts can have many attributes

      1. If no attributes are specified, then it uses the browser's default

      2. Font have the tags, <font> and </font>

      3. face is the type of font

      4. font color

      5. font size

      6. Example: <font color="red" face="Courier" size="+2"> Example</font>

  3. Alignment - left, right, justify, and center

    1. Use the paragraph command, <p> and </p>

    2. Note - sometimes the </p> is dropped

    3. Put in alignment, <p align="right">Paragraph....</p>

    4. Note - a center command can be used too, <center> </center>

    5. The alignment works for text, paragraph, picture, and lines

  4. Headings

    1. Put heading between tags, <h1> and </h1>

    2. Can have headings, h1, h2, h3, h4, h5, and h6

    3. Each heading is different

 

Hyperlinks

 

  1. Hyperlinks are more complicated

    1. Hyperlink allows a user to jump to another webpage

    2. This hyperlink is for a text

    3. Hyperlink is <A HREF="http://www.ken-szulczyk.com">Ken Szulczyk</A>

    4. Hyperlink is absolute, it have whole web address

      • <A HREF="books.php">Ken Szulczyk</A>

      • This looks for the webpage in the same folder

      • Could have folders on your website

      • <A HREF="writer/books.php">Ken Szulczyk</A>

      • writer is the folder and the file is books.php

    5. Rule - use absolute web addresses when links are outside your website

      • Use relative web addresses to move within website

  2. Inserting a picture

    1. The command to insert a picture is

    2. <img SRC= "http://www.ken-szulczyk.com/logo.gif">

    3. Picture is from the website

    4. Could have picture in same folder as the webpage,

      • <img SRC= "logo.gif">

    5. Could have picture in a folder in your web site

      • <img SRC= "pictures/logo.gif">

    6. Other info goes inside the img tag

      1. Traditional to describe or name the picture

      2. This is for search engines or people with text browsers

      3. <img SRC= "pictures/logo.gif" alt="The company's logo">

    7. Could form a hyperlink picture

      1. <A HREF="company_info.php"><img SRC= "logo.gif"></A>

      2. This forms a hyperlink border around the box

      3. Could add the command, border="0"

      4. <A HREF="company_info.php"><img border="0" SRC= "logo.gif"></A>

  3. Copy and Paste

    1. Microsoft has a severe deficiency when copying and pasting

      • It remembers and copies the original style, like font face, size, etc.

      • Then your document looks terrible, because the formatting does not match

    2. Paste text as text only, so it does not change the style of your document

  4. Insert pictures

    1. Alter size of picture

    2. Change alignment, like left, center, or right

    3. Headers and footers

      • Insert or modify a header

      • Insert or modify a footer

      • Insert page numbers (header or footer)

 

FOLLOW ME