HTML Hints & Tips. HTML is short for HyperText Markup Language.

Transcription

1 Introduction to HTML HTML is short for HyperText Markup Language. It is a formatting language used to specify web page attributes such as headings, paragraphs, lists, tables and text variations. The HTML attributes are created by adding HTML tags to a text file. The tags tell the web browser how to present web page elements. Although there are almost 100 different tags, there are a handful that you will use on a regular basis and are helpful to know. Using HTML Tags HTML tags generally come in pairs, an opening tag and a closing tag. Content that is placed between these tags take on the attributes of the selected tag. For example: This text is <b>bold</b> and this text is not. Would display on the web page as: This text is bold and this text is not. The opening tag is contained in brackets created by using the greater than and less than signs < > The closing tag is the same as the opening tag except that the tag is prefaced by a forward slash / TIP Although the HTML tags will work whether you use upper or lowercase letters it is industry best practice to always use lowercase. Using uppercase letters can be likened to shouting the tag name and it can be very distracting to the eye when working with an HTML tagged page of content. Frequently Used Categories of HTML Tags The frequently categories of HTML tags are: Text Formatting Line Breaks and Text Alignment Lists Tables Lines 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 1

2 TIP A great way to create and check new HTML content is to use a realtime online HTML editor such as, This editor allows you to enter content with HTML tags in one frame while seeing how it will appear on an active webpage in a second frame. Once you get the content the way you want it you can copy and paste it into your webpage. HTML Text Formatting These are HTML tags that set the attributes of the text to be displayed on a web page such as text size, bolding, italics, underlining, color and font face. Bold <b>creates bold text</b> <b> </b> Creates bold text Italic Underline Subscript Superscript Blinking Font Face <i> </i> <u> </u>   <blink> </blink> <font face=font name> </font> <i>creates italic text</i> Creates italic text <u>creates underlined text</u> Creates underlined text _{creates subscript} Creates subscript ^{creates superscript} Creates superscript <blink>creates blinking text</blink> Text blinks on and off <font face="arial">sets the font face to Arial</font> Sets the font face to Arial Some typical font faces are: Times New Roman, Arial, Cambria, Calibri, Tahoma, Verdana 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 2

3 HTML Text Formatting, Font Size <font size=5>here is a size 5 font</font> <font size=#> </font> Here is a size 5 font Heading Size Font Color <h#> </h> <font color="color"> </font> Font sizes range from 1 to 7, 1 being the smallest and 7 being the largest. The default size of a font is 3. <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 There are 6 levels of headings ranging from h1 for the most important, to h6 for the least important. <font color=red>this font is red </font> This font is red Sets font color, using the color name or hex value. It is easiest to use the name of the color, examples include: green, red, blue, yellow, purple, magenta, brown, orange. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 3

4 HTML Line Breaks and Text Alignment These are HTML tags that help you create spacing and alignment with your text blocks. Paragraph This is an example displaying the use of <p> the paragraph tag. <p> This will create a line break and a space between lines. Carriage Return Align or Justify Text Indent Text from the Left & Right <br> <p align=location> </p> <blockquote> </blockquote> This is an example displaying the use of the paragraph tag. This will create a line break and a space between lines. The paragraph tag creates a line break and a space between lines. The closing tag is only required if you are setting alignment for the paragraph. This tag adds a line break.<br> This sentence will start on a new line. This tag adds a line break. This sentence will start on a new line. Creates a single line break or carriage return each time this tag is used. It does not require a closing tag. <p align=center>center the text on the screen.</p> Alignment options include left, center, right and justified. <blockquote>indents text from both sides</blockquote> Indents text from both sides 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 4

5 HTML Lists These tags help your order text into a list format. Numbered list <ol> </ol> <ol> <li>list item 2</li> </ol> 1. List item 1 2. List item 2 3. List item 3 The default bullet type is 1.,2., etc. Unordered or Bulleted List List Item <ul> </ul> <li> </li> <ul> <li>list item 2</li> </ul> List item 1 List item 2 List item 3 The default bullet type is a disc. List item 1 Precedes each list item, and adds a number or symbol depending upon the type of list selected. The default bullet type is a disc. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 5

6 HTML Lists, Bullet Type (entire list) <ul type=name of bullet type> <ul type=circle> <li>list item 2</li> </ul> o List item 1 o List item 2 Bullet Type (individual bullet) <li type=name of bullet type> <ul type=circle> <li>list item 2</li> </ul> List item 1 List item 2 The bullet type defined will apply to the entire bulleted list. Bullet types can be Disc, Circle or Square. <ul> <li type=circle>list item 2</li> </ul> List item 1 o List item 2 List item 3 The bullet type defined will apply to the selected bullet. Bullet types can be Disc, Circle or Square. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 6

7 HTML Lists, Numbering Type (entire list) <ol type=name of numbering type> <ol type=a> <li>list item 2</li> </ol> Numbering Type (individual bullet) <li type=name of numbering type> A. List item 1 B. List item 2 C. List item 3 The numbering type defined will apply to the entire bulleted list. Numbering types can be A, a, I, I, 1. <ol> <li type=a>list item 2</li> </ol> 1. List item 1 A. List item 2 2. List item 3 The numbering type defined will apply to the selected bullet. Numbering types can be A, a, I, I, 1. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 7

8 HTML Lists, Starting Number (entire list) <ol start=#> <ol start=3> <li>list item 2</li> </ol> 3. List item 1 4. List item 2 5. List item 3 <ol type= A start=3> <li>list item 2</li> </ol> C. List item 1 D. List item 2 E. List item 3 The starting number will resequence the entire bulleted list. Numbering types can be A, a, I, I, 1. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 8

9 HTML Lists, Starting Number (individual bullet) <li value=#> <ol> <li value=5>list item 2</li> </ol> 1. List item 1 5. List item 2 6. List item 3 Definition List Definition List - Term Definition List - Definition <dl></dl> <dt> <dd> <ol type= a> <li value=10>list item 2</li> </ol> A. List item 1 J. List item 2 K. List item 3 The starting number will resequence the entire bulleted list from the identified bullent to the end of the list. Numbering types can be A, a, I, I, 1. <dl> <dt>quiz<dd>a way to test ones knowledge. <dt>apple<dd>a piece of fruit. </dl> Quiz A way to test ones knowledge. Apple A piece of fruit. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 9

10 HTML Tables Table <table> Table Row </tr> Table Row Cell <td></td> <table> 2</td> </tr> Table cell 1 Table cell 2 Table Border Width <table border=#> <table border=1> 2</td> </tr> Table cell 1 Table cell 2 Table Header <th></th> <table border=1> 2</td></tr> Table Header 1 Table Header 2 Table cell 1 Table cell 2 Sets text in the cell to bold and centers the text 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 10

11 HTML Tables, Table Cell Spacing <table cellspacing=#> <table border=1 cellspacing=5> 2</td></tr> Table Header 1 Table Header 2 Table cell 1 Table cell 2 Cell Contents Border Spacing <table cellpadding=#> Results in wider spacing between cell outlines. <table border=1 cellspacing=5 cellpadding=10> 2</td></tr> Table Header 1 Table Header 2 Table cell 1 Table cell 2 Results in more spacing around the text in the cells. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 11

12 HTML Tables, Table Width <table width=#> or <table width=#%> <table border=1 cellspacing=5 cellpadding=10 table width=50%> 2</td></tr> The table will span half of the webpage width Column Width <col width=#> <table border=1 cellspacing=5 cellpadding=10 table width=500> 2</td></tr> The table will span a width of 500 pixels The table width is expressed as a percentage of the width of the screen or as a number of pixels. <table border=1 col width=150> 2</td></tr> Each column will be 150 pixels wide and if the text is wider than that it will wrap. The column width is expressed in the number of pixels. *A pixel is a single dot. Screen images are made up of an array of dots. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 12

13 HTML Tables, Horizontal Cell Alignment (for a specific row) <tr align=alignment parameter> <table border=1 col width=250> <tr align=right><td>table cell 1</td><td>Table cell 2</td></tr> <td>table cell 3</td><td>Table cell 4</td> Table Header 1 Table Header 2 Table cell 1 Table cell 2 Table cell 3 Table cell 4 Horizontal Cell Alignment (for a specific cell) <td align=alignment parameter> Sets the horizontal alignment for a specific row of cells. Options are left, center, or right. Default alignment is left. <table border=1 col width=250> <td align=right>table cell 1</td><td>Table cell 2</td></tr> <td>table cell 3</td><td>Table cell 4</td> Table Header 1 Table Header 2 Table cell 1 Table cell 2 Table cell 3 Table cell 4 Sets the horizontal alignment for a specific cell. Options are left, center, or right. Default alignment is left. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 13

14 HTML Lines Horizontal Creates a line that goes across the Line <hr> webpage horizontally. Horizontal Line Width Horizontal Line Thickness Solid Line (no 3D shadow) <hr width=#> or <hr width=#%> <hr size=#> <hr noshade> <hr width=50% size=3> The number value for the width and thickness of a line is always refers to pixels. The default alignment is centered. <hr width=50% size=5 noshade> Horizontal Line Alignment <hr align=alignment parameter> <hr width=50% size=5 noshade align=left> Alignment options are right, left, center. The default is center. 2/10 Provided by Rebecca Spitler Rotary Club of Gwinnett County Page 14