of 16 /16
Basic HTML Tags

Basic HTML Tags

Embed Size (px)


Basic HTML Tags. Basic Tags. Heading 1 (use 1-6) Paragraph Break Line Bold – Bolds the text Italic – Italicizes the text Underline – Underlines the text Horizontal Rule – draws a straight line across page. Creating Lists (Bulleted). Unordered List - PowerPoint PPT Presentation

Text of Basic HTML Tags

  • 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


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


  • 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