Basic HTML Tags

Basic TagsHeading 1 (use 1-6)ParagraphBreak Line

Bold Bolds the textItalic Italicizes the textUnderline Underlines the text

Horizontal Rule draws a straight line across page

Creating Lists (Bulleted)Unordered ListList Item List Item List Item

CarsMotorcyclesTrucks

Creating ListsOrdered List (instead of ul)List Item List Item List Item

CarsMotorcyclesTrucks

Text Alignment

To center lines on the page requires adding the attribute "align" inside your tags. This is my titleRight Align My right side title

FontSizeUse the "font" tag and the attribute "size". Sizes can be set from 1 to 7 with 7 being the largest. size 3 textFaceMany browser don't recognize fancy fontsStick to 3 types: Arial, Verdana, and Times New Roman. Use the attribute "face". This is arial text

Tips on TagsTags should always be in lower-case lettersTags usually have a beginning and an endIndenting and spacing will keep you saneFilenames and URLs are almost always case-sensitive.

What About Style?In modern website design, HTML tags are only used to structure the document to show headings, paragraphs, lists, etc.

A special system called Style Sheets (CSS) are used to describe how tags appear. That is what we learn in Fundamentals of Web Design

BackgroundBgcolorSpecifies a background-color for a HTML page. BackgroundSpecifies a background-image for a HTML page

Hexadecimal Color Codes =#000000 The six numbers following the # sign denotes the hexadecimal code for a particular color (in this case, black). If you were to put this piece of code in the opening body tag of your html document, all your links (by default) would be black.You dont need to memorize these numbers, but they are handy to know.#000000 black #FFFFFF white #0000FF blue (default link color) #FF0000 red (default active link color) #80080 purple (default visited link color)

Images Two main types of Web graphic filesGIF (Graphics Interchange Format) Great for logos, charts, buttonsJPG (Joint Photographic Experts Group) Great for photographs

Place all images in the same directory/folder where you web pages are

Images Important points about graphicsKeep graphic files size small: Most users are impatient when it comes to pages loading. Add ALTernative text to identify graphics in non-graphic browsers.

Resize the image in a graphic editor rather than sizing the graphic in HTML

Resizing Photos in HTMLIMG Tag Review:

Risk distorting photo and longer load times502005

Resizing Photo FilesOpen photo in PaintImage | Stretch/Skew (Ctrl-W)Enter new % size (like 30%), hit OKFile | Save AsDont overwrite original fileGive it a meaningful name

Resizing Photo FilesResized in Paint231 x 30833.7 KBNo Change768 x 1024254 KBResized in HTML231 x 308254 KB

Comment TagThe comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date.

We will use comments in this class to pin steps in assignments and projects

Comment Tag