HTML Basics

HTML Coding

HTML Hypertext markup language The code used to create web pages

HTML Tags Text that appears between two angle brackets  Text that tells the web browser how to display a web page’s content Do not see HTML tags in the browser window

Tag Sets Pairs of HTML tags Tells a browser where formatting should start and end

Starting tag Also called opening tag  Defines the beginning of a particular tag Example: ▫ definitely red

Ending tag Also called closing tag  Tells the browser where a starting tag ends  Forward slash in the brackets indicates an ending tag Example: ▫ definitely red

Nested Tag A tag enclosed inside another set of tags ▫Example  He almost won an award.

Empty Tag A tag that only requires an opening tag Examples:  - line break  - horizontal rule  - image

Source Code The text and HTML elements used to create a web page

Using a Text Editor

Main Parts of an HTML Document DTD (Document Type Definition) Header Body

DTD Specifies what version of HTML is used in your page

Header Provides info to the browser about your page ▫Such as title and author Does NOT appear in the browser The TITLE is displayed in the browser’s title bar,

Body The tag set that encloses the code for the content you see displayed in the browser’s window,

Naming Files Keep file names descriptive but somewhat short Use the underscore (_) to indicate a blank space between words

File Name Extension Tells the computer what type of file it is reading Notepad automatically saves all files with a.txt extension Web browsers can’t read.txt Must change it to.htm

Attribute An instruction that further specifies a tag’s characteristics Allows you to assign colors, styles and alignment to a page Placed in opening tags Have a name, an equal sign (=) and a descriptor that MUST appear in quotes Must be in lowercase to meet specifications

Font Color Attribute Used to change the text color The descriptor specifies which color to use Example: grass 16 named colors 216 hexadecimal colors

Background Color Attribute Used to specify a page’s background color by adding attributes to the tag Example:

Alignment Attributes Used to specify text alignment All text is automatically aligned to the left margin To change the alignment add an align attribute Example:

Heading Tags Used to break text into short, readable sections 6 different sizes: ▫H1 – largest ▫H6 - smallest

Lists Make text easier to read Adds visual interest to a page Helps readers identify key points on a page more quickly

2 Types of Lists Ordered List ▫Items that must appear in a certain sequence (numbered or lettered) ▫Uses the, tag set Unordered List ▫Items can appear in any order (bulleted) ▫Uses the, tag set

Viewing an HTML Page It is important to view the web pages that you create in a text editor in a browser because Notepad does not show you how your web page will look

Enhancing and Testing Your HTML Page

Adding Images Using HTML Use the tag to insert an image into a web page The tag locates the image and displays it in a browser Consists of five (5) common attributes

src: specifies the source location of the image alt: gives the browser an alternative text message to display if the image is missing align: wraps text around an image border: places a border around an image width: specifies the image’s width height: specifies the image’s height src and alt should always be used when creating an image tag

Example

Anchor Tag Creates a hyperlink around selected text, is the tag set used to create all links href is the attribute used to tell the web browser where it needs to go

Link Types Text Link: text a user clicks to activate a hyperlink Graphic Link: an image a user clicks to activate a link

Relative Link Example: click here if you are happy Code contains the name of the file being linked to Only works if the document being linked to is in the same web site folder as the document containing the link Links pages within the SAME web site

Absolute Link Example: click here if you are really happy “ Code contains the complete URL or path of the file being linked to Usually external links

Debugging Locating and correcting any obvious errors in your code as you are building the page

Testing Checking the page to make sure it displays as designed Allows you to double check the links are working properly The formal process of checking web pages for completeness and full functionality in a browser before launching it