Introduction to HTML
Definitions W W W – World Wide Web. HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web. HTML is a text formatting language. URL – Uniform Resource Locator. Browser – A software program which is used to show web pages. TP - Transfer Protocol
Pages end with “.htm” or “.html” Master Internet Volunteer Program 09/22/97 “Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm” or “.html” HTML Editor – A word processor that has been specialized to make the writing of HTML documents more effortless. Provide information in an organized way Chat Groups Specialized information areas Internet access University of Minnesota Extension Service 3
Tags Not case sensitive Codes enclosed in brackets Usually paired <TITLE>My Web Page</TITLE> Not case sensitive <TITLE> = <title> = <TITLE>
Choosing Text Editor HTML Editors enable users to create documents quickly and easily by pushing a few buttons. Instead of entering all of the HTML codes by hand. These programs will generate the HTML Source Code for you.
Choosing Text Editor HTML Editors are excellent tools for experienced web developers; however; it is important that you learn and understand the HTML language so that you can edit code and fix “bugs” in your pages.
Starting NotePad NotePad is the standard text editor that comes with the microsoft windows operating system. To start NotePad in windows follow the steps bellow: 1. Click on the “Start” button located on your Windows task bar. 2. Click on “Programs” and then click on the directory menu labeled “Accessories”. 3. Locate the shortcut “NotePad” and click the shortcut once.
HTML Page Creation & Editing Objectives Upon completing this section, you should be able to 1. Choose a Text Editor. 2. Create a Basic Starting Document. 3. Understand and set Document Properties. 4. View Your Results in a Browser.
<TITLE>Al al-Bayt University</TITLE> Master Internet Volunteer Program 09/22/97 HTML Structure <HTML> <HEAD> <TITLE>Al al-Bayt University</TITLE> </HEAD> <BODY> This is what is displayed. </BODY> </HTML> Tech help should be a local or toll-free call Is it available when you are using the net? Will you get a real person or have to leave voice mail? (voice mail is OK if the response time is fast and during a time you are not connected) Try calling tech support before subscribing. University of Minnesota Extension Service 9
Setting Document Properties Document properties are controlled by attributes of the BODY element. For example, there are color settings for the background color of the page, the document’s text and different states of links.
HTML <html> Tag Definition and Usage The <html> tag tells the browser that this is an HTML document. The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
Attributes Definition and Usage The name attribute specifies the name of an <input> element. Syntax <input name="text"> Attribute Values Value Description text Specifies the name of the <input> element 12
HTML <body> Tag Definition and Usage The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
HTML <body> Tag Attributes Value alink color background URL bgcolor link text vlink
HTML <font> Tag Definition and Usage The <font> tag is not supported in HTML5. Use CSS instead. The <font> tag specifies the font face, font size, and color of text.
HTML <font> Tag Example Specify the font size, font face and color of text: <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font>
HTML <font> Tag Attribute Value color rgb(x,x,x) #xxxxxx colorname face font_family size number
HTML <img> Tag Example How to insert an image: <img src="smiley.gif" alt="Smiley face" height="42" width="42"> Try it Yourself »
HTML <img> Tag Definition and Usage The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.
HTML <img> Tag Attribute Value Description align top bottom middle left right Specifies the alignment of an image according to surrounding elements alt text Specifies an alternate text for an image border pixels Specifies the width of the border around an image height Specifies the height of an image hspace Specifies the whitespace on left and right side of an image
HTML <img> Tag Attribute longdesc URL Specifies a URL to a detailed description of an image sizes Specifies image sizes for different page layouts src Specifies the URL of an image srcset Specifies the URL of the image to use in different situations usemap #mapname Specifies an image as a client-side image-map vspace pixels .Specifies the whitespace on top and bottom of an image width Specifies the width of an image
HTML <p> Tag Example A paragraph is marked up as follows: <p>This is some text in a paragraph.</p> Definition and Usage The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element
HTML <p> Tag Attribute Value Description align left right center justify Specifies the alignment of the text within a paragraph
HTML <table> Tag Example A simple HTML table, containing two columns and two rows: <table> <tr> <th>Month</th> <th>Savings</th> </tr> <td>January</td> <td>$100</td> </table>
HTML <table> Tag Definition and Usage The <table> tag defines an HTML table. An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
HTML <table> Tag Attribute Value Description align left center right Not supported in HTML5. Specifies the alignment of a table according to surrounding text bgcolor rgb(x,x,x) #xxxxxx colorname Specifies the background color for a table border 1 0 Specifies whether or not the table is being used for layout purposes cellpadding pixels Specifies the space between the cell wall and the cell content
HTML <table> Tag Attribute cellspacing pixels Specifies the space between cells frame void above below hsides lhs rhs vsides box border Specifies which parts of the outside borders that should be visible rules none groups rows cols all Specifies which parts of the inside borders that should be visible
HTML <table> Tag Attribute sortable Specifies that the table should be sortable summary text Not supported in HTML5. Specifies a summary of the content of a table width pixels % Not supported in HTML5. Specifies the width of a table
HTML <tr> Tag Example A simple HTML table, containing two columns and two rows: <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
HTML <tr> Tag Definition and Usage The <tr> tag defines a row in an HTML table. A <tr> element contains one or more <th> or <td> elements.
Color Codes Colors are set using “RGB” color codes, which are, represented as hexadecimal values. Each 2-digit section of the code represents the amount, in sequence, of red, green or blue that forms the color. For example, a RGB value with 00 as the first two digits has no red in the color.
Main Colours
RGB Colour Model
16 Basic Colors
Color Codes WHITE BLACK RED GREEN BLUE MAGENTA CYAN YELLOW AQUAMARINE BAKER’S CHOCOLATE VIOLET BRASS COPPER PINK ORANGE #FFFFFF #000000 #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #70DB93 #5C3317 #9F5F9F #B5A642 #B87333 #FF6EC7 #FF7F00