HTML Notes From Teacher.pdf

# Introduction to HTML **HTML** is the "mother tongue" of your browser. - The term "hypertext" was first introduced by Nelson in 1965. - HTML was invented in 1990 by a scientist called Tim Berners-Lee. - The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. - The project became a bigger success. By inventing HTML he laid the foundation for the web as we know it today. - HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. **H-T-M-L** are initials that stand for **Hypertext Markup Language**. - **Hyper** is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. - HTML does not hold to that pattern and allows the person viewing the **World Wide Web** page to go anywhere, any time they want. - **Text** is what you will use. Real, honest to goodness English letters. - **Mark up** is what you will do. You will write in plain English and then mark up what you wrote. - **Language** it's a language -- but the language is plain English. ## What can I use HTML for? - If you want to make websites, there is no way around HTML. - Even if you're using a program to create websites, such as Dreamweaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better. - The good news is that HTML is easy to learn and use. ## HTML - **Hyper Text Markup Language** - A markup language designed for the creation of web pages and other information viewable in a browser. - The basic language used to write web pages. - File extension: .htm, .html ## Creating a HTML File 1. Open Notepad. 2. Click on File -> Save as... 3. In the File name pull-down box, type in webpage.html 4. Click on Save. 5. Type in content for your file. 6. Once you finished the content, click on File -> Save. ## How is a HTML File Looks Like The document shows a sample HTML code in a browser window. ## HTML Tags **Tags** are labels you use to mark up the beginning and end of an element. - Tag usually goes with pair: an open tag and an end tag. - All tags have the same format: they begin with a less-than sign `<` and end with a greater-than sign `>`. | Effect | Code | Code Used | What It Does | | :------ | :---- | :--------- | :------------- | | Bold | B | `<B>Bold</B>` | Bold | | Italic | I | `<I>Italic</I>` | Italic | - There are two kinds of tags - - Opening tags: `<html>` - Closing tags: `</html>` - The only difference between an opening tag and a closing tag is the forward slash `/`. - You label content by putting it between an opening tag and a closing tag. - Single tag: `<hr>`, `<br>` - Tags are NOT case sensitive ## HTML Document Structure ```html <html> <head> <title> Page Title Goes Here </title> </head> <body> content goes here </body> </html> ``` ## Basic Tags - `<html> </html>` :-- The entire web page is enclosed within `<html> </html>` tags. - Within these tags two distinct sections are created using: - `<head> </head>` - `<body> </body>` - `<head> </head>` :-- Information placed within the `<head> </head>` tags is not displayed in the browser. - `<title> </title>` :-- It is used to give the title of the web page. - `<body> </body>` :-- This tag is used to indicate the start and end of the main body of textual information. ## Attributes/Elements of `<body> </body>` | Attribute | Description | | :---------- | :------------------------------------------------------------------------------------------------- | | Bgcolor | Changes the default background color to whatever color is specified with this tag. | | Background | Specifies the name of the gif file that will be used as the background of the document. | | Text | Changes the body text color from its default value to the color specified with this attribute. | **Example:** ```html <body bgcolor="#000000"> <body bgcolor="black"> <body background="clouds.gif"> ``` ## Basic Tags - `<b> </b>` :- Bold - `<l> </l>` :- Italics - `<U> </U>` :- underline - `<br>` :- line break - `<hr>` :- horizontal line - attributes of `<hr>` - width - Size - align* - "left" - "center" - "right" **Example:** ```html <hr width="50%" align="right"> <hr width="200" size="5" > ``` ## Paragraph - **Paragraphs** are defined with the `<p>` tag. **Example:** ```html <p>This is a paragraph</p> <p>This is another paragraph</p> ``` - A blank line is added before/after the heading. ## Text - **Put text on a webpage** - `<p> </p>` :- paragraph **Example:** ```html <p> Today is my first day at my new job, I'm so excited! </p> ``` - Output: Today is my first day at my new job, I'm so – excited! - **Put text on the right of a page** **Example:** ```html <p align="right"> Hello </p> ``` - Output: - **Hello** - **Put text in center of a page** **Example:** ```html <center> Hello </center> ``` - Output: - **Hello** ## Font - **Font** is defined by `<font>` tag, with the following attributes: | Attribute | Description | | :---------- | :------------------------------------------------------------------------------- | | size="number" | size="2" Defines the font size | | size="+number" | size="+1" Increases the font size | | size="-number" | size="-1" Decreases the font size | | face="face-name" | face="Times" Defines the font-name | | color="color-value" | color="#FFFFFF" Defines the font color | | color="color-name" | color="red" Defines the font color | **Example:** ```html Regular<br> <font size="2">size=2</font><br> <font size="+2">size=+2</font><br> <font size="-2">size=-2</font><br> <font face="Arial">Arial</font><br> <font color="#00FF00">Green</font><br> <font color="red">Red</font><br> ``` - To change text font **Example:** ```html <font face="Times new Roman"> Hello </font> ``` - Output: Hello - To change text size **Example:** ```html <font size="+3"> Hello </font> ``` - Output: Hello - To change text color **Example:** ```html <font color="red"> Hello </font> ``` - Output: Hello - Using both **Example:** ```html <font size="+3" color="red"> Hello </font> ``` - Output: Hello ## Comments in HTML - The comment tag is used to insert a comment in the HTML source code. - A comment will be ignored by the browser. - You can use comments to explain your code, which can help you when you edit the source code at a later date. - The image above shows the code for inserting comments in HTML. ## Heading - **Heading tags:** `<h1>` to `<h6>`, where `<h1>` is the largest. **Example:** ```html <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4 </h4> <h5>Heading 5</h5> <h6>Heading 6</h6> Regular text ``` - A blank line is added before/after the heading. ## Lists - **Three types of lists** - `<ul></ul>` define unordered lists - `<li></li>` define a list item - `<ul type="disc">`, `<ul type="circle">`, `<ul type=square>` - `<ol></ol>` define ordered lists - `<li></li>` define a list item - `<ol type="A">`, `<ol type="a">`, `<ol type="I">`, `<ol type="i">` - `<dl></dl>` define definition lists - `<dt></dt>` define a definition-list term. - `<dd></dd>` define definition-list definition. ## Example ```html Unordered List <ul> <li>Coffee</li> <li>Milk</li> </ul> Ordered List <ol> <li>Coffee</li> <li>Milk</li> </ol> Defnition List <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> ``` ## Image Tag - In HTML, images are defined with the `<img>` tag. - The `<img>` tag is empty, which means that it contains attributes only and it has no closing tag. - To display an image on a page, you need to use the src attribute. Src stands for "source". - The value of the src attribute is the URL of the image you want to display on your page. ## Syntax - `<img src="url">` - The URL points to the location where the image is stored. - The browser puts the image where the image tag occurs in the document. - If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. ## Image...... Alt Attribute - The alt attribute is used to define an "alternate text" for an image. - The value of the alt attribute is an author-defined text. - The image above shows the code for the alt attribute. ## Image...... Size & Title Attributes - **Size:** the size attributes define the width and height of the image. **Example:** ```html <img src="image.jpg" width="200" height="150"> ``` - **Title:** It is used to give title for the Image. **Example:** ```html <img src="image.jpg" alt="Sorry, The picture is not available" title="My friends"> ``` ## Image...... Spacing Attributes - You can create space between the image and surrounding text by defining vertical and horizontal space. **Example:** ```html <img src="image.jpg" vspace="5" hspace="10"> ``` ## Image...... Alignment Attribute - You can use the align attribute to position the image: **Example:** ```html <img src="image.jpg" align="left"> ``` - Other possible values: "right", "center" ## Image...... Border Atribute - The border attribute places a border around the image. **Example:** ```html <img src="image.jpg" border="1"> ``` - If no border attribute is specified, no border is applied. - If you want to make an image without a border, specify a zero border. **Example:** ```html <img src="image.jpg" border="0"> ``` ## Hyperlink.... Anchor Tag - HTML uses a hyperlink to link to another document on the Web. - HTML uses the `<a>` (anchor) tag to create a link to another document. - An anchor can point to any resource on the Web: - an HTML page, - an image, - a sound file, - a movie, etc. ## Syntax - `<a href="url"> Text to be displayed </a>` - The href attribute is used to address the document to link to, - The words between the open and close of the anchor tag will be displayed as a hyperlink. ## Anchor Tag ...... The Target Attribute - With the target attribute, you can define where the linked document will be opened. **Example:** ```html <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> ``` - It will open the document in a new browser window. ## Sectional Hyperlink - Insert the following HTML code into the part of the web document you want to bookmark: **Example:** ```html <a name="top"></a> ``` - Now make a hyperlink that points to the bookmark. **Example:** ```html <a href="#top">Top of Page</a> ``` - The image above show the Output of the code. ## Marquee Tag: `<marquee> </marquee>` - If you want your text to move with in the screen, use this tag. **Example:** ```html <marquee> This text will move </marquee> ``` - The text in between the tags will move horizontally. ## Marquee ......Attribute: bgcolor ## Attribute: height, width - **bgcolor** This sets the background color for marquee path **Example:** ```html <marquee bgcolor=orange> Moving Text </marquee> ``` - **width:** The attribute width sets the width of marquee area - **height:** The attribute height sets the height of marquee area **Example:** ```html <marquee bgcolor=orange width=100 height=20> Moving Text </marquee> ``` ## Marquee Attribute: direction ## ...... - This sets the direction for the text. It takes values LEFT or RIGHT or UP or DOWN **Example:** ```html <marquee bgcolor=orange width=100 height=20 direction=right> Text will Move </marquee> ``` ## Marquee ......Attribute: behavior ## ...... - This sets the background color for marquee path. It takes values **BEHAVIOR=SCROLL**, which is the default, indicates that the content should scroll off the edge of the marquee area, then reappear on the other side: **BEHAVIOR=SLIDE**, is almost the same, except that it indicates that when the leading part content reaches the left edge it should stop without scrolling off. **BEHAVIOR= ALTERNATE**, makes the content bounce back and forth, all of it remaining visible all the time **Example:** ```html <marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate> Moving Text</marquee> ``` ## Marquee ......Attribute: LOOP ## ...... - LOOP sets how many times the marquee should loop. - The default value (i.e. if you don't put a LOOP attribute at all) is INFINITE, which means that the marquee loops endlessly. - This code creates a marquee that loops twice: **Example:** ```html <MARQUEE LOOP=2> Moving text </MARQUEE> ``` - One of the problems with LOOP is that the content disappears after the last loop. - To set the marquee so that the content is visible when the looping is done set BEHAVIOR SLIDE: **Example:** ```html <MARQUEE LOOP=2 BEHAVIOR=SLIDE> Moving text </MARQUEE> ``` ## Marquee Attribute: scrollamount ## ...... - This controls the amount of movement (in pixels) between the successive displays that give the impression of animation. **Example:** ```html <marquee bgcolor = orange width=200 height=20 direction=right behavior=alternate scrollamount = 5> Moving Text </marquee> ``` ## Marquee Attribute: scrollDelay ## ...... - This controls the delay (in milliseconds) between the successive displays that give the impression of animation. **Example:** ```html <marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate scrolldelay = 5> Scrolling Text Tag </marquee> ``` ## Basic HTML Tables - A table organizes data in rows and columns (#of columns=#of cells) - `<TABLE> ... </TABLE>` Enclose the table structure - `<TR> ... </TR>` Table row - `<TD> ... </TD>` Each data cell within a row. The smallest area of the table we are able to format ## Basic table structure ```html <TABLE> <TR> <TD>A1</TD> <TD>A2</TD> <TD>A3</TD> </TR> <TR> <TD>B1</TD> <TD>B2</TD> <TD>B3</TD> </TR> </TABLE> ``` ## Table Caption and Headers - `<CAPTION ALIGN=value>...</CAPTION>` A caption is centered at the TOP/BOTTOM of the table. - `<TH> </TH>` special cells that act as table headers (centered and boldface) ```html <TABLE> <CAPTION>This is a table</CAPTION> <TR> <TH>First Row</TH> </TR> <TR> <TD>A1</TD> </TR> </TABLE> ``` - The image above shows the sample table with caption and header. ## <Table> attributes - `BORDER=# pixels>` Size of the border around the table - `CELLSPACING=# pixels>` space inserted b/w cells - `CELLPADDING=# pixels>` size of the gap b/w the cell text and the cell border - `ALIGN = LEFT/RIGHT>` table is placed on the left/right and text is wrapped around the table - `CENTER>` table is placed in the center of the page. Text is not wrapped around the table. ## More <Table> Attributes - `BORDERCOLOR=color>` changes the color of the border - `BORDERCOLORDARK=color>` `BORDERCOLORLIGHT=color>` creates a 3D effect for the border - The image above shows the effect of the `BORDERCOLOR` and `BORDERCOLORDARK` attributes. ## More <Table> attributes - `FRAME=box|above|below|void ...>` controls which side of the table has borders - The image above shows different values for the `FRAME` attribute. ## More <Table> attributes - `RULES=all|rows|cols|none>` controls around which cell the border is drawn. - The image above shows different values for the `RULES` attribute. ## <TABLE>,<TD>,<TH> attributes - `WIDTH=pixels or %>` Table/cell width in pixels or as % of the page/table - `HEIGHT=pixels or %>` Same as above -`BGCOLOR=color>` Change the table/cell background color - `BACKGROUND="pic.jpg">` Tiles a picture as a background ## Cell attributes (<TD>,<TH>) - `COLSPAN=#> ` this cell spans for # columns - `ROWSPAN=#> ` this cell spans for # rows - `ALIGN= LEFT/RIGHT>` text in the cell is aligned left/right - `CENTER>` text in the cell is centered - `VALIGN=TOP/BOTTOM>` text in the cell is aligned top/bottom - `MIDDLE>` text in the cell is aligned with the middle of the cell ## HTML Table - Colspan - To make a cell span over multiple columns, use the colspan attribute: ```html <table> <tr> <th colspan="2">Name</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>43</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>57</td> </tr> </table> ``` - The value of the colspan attribute represents the number of columns to span. ## HTML Table - Rowspan - To make a cell span over multiple rows, use the rowspan attribute: ```html <table> <tr> <th>Name</th> <td>Jill</td> </tr> <tr> <th rowspan="2">Phone</th> <td>555-1234</td> </tr> <tr> <td>555-8745</td> </tr> </table> ``` - The value of the rowspan attribute represents the number of rows to span. ## Using tables for page layout - To display content in newspaper-like columns or separates the page in different topical areas. - Start with the outer table and work your way in using nested tables - Add background color to visually separate column. - Add cell padding to avoid crowding - Use row spanning to vary the starting point of articles - The image above shows a sample page layout using tables. Code for the layout is also provided below the image. ## Outer table ```html <BODY BACKGROUND="RedBar.jpg" <TABLE WIDTH="610" > <TR> <TD WIDTH="165" > Image+links</TD> <TD WIDTH="445" > Nested Table </TD> </TR> </TABLE> ``` ## Nested table ```html <TABLE WIDTH="445"> <TR><TD COLSPAN=2 WIDTH="445">Logo</TD> </TR> <TR><TD ROWSPAN=2 WIDTH="350">Main</TD> </TR> <TD WIDTH="95">Side note</TD> <TR><TD WIDTH="95">Another note</TD> </TR> </TABLE> ``` ## Frames - Frames allow more than one Web page at a time to be displayed within the browser window. - When frames are used, the page opened in the browser contains instructions about: - how the browser window is to be divided into separate regions - which page should be initially displayed into each region. - The image above shows two pages, `Toolbar.html` and `Products.html`, and their integration via frames. ## Navigating with frames - When frames are used, clicking on a link in a frame can: - Change the content of that frame - Change the content of a different frame - Display a page without using the frame page - Typical use of frames include: - Table of content - Navigation toolbars - Since the information displayed is visible at all times, frames are often used for navigation. ## Good things about frames - Elements that the user should always see, such as control bars, copyright notices, and title graphics can be placed in a static frame. As the user navigates the site in "live" frames, the static frame's contents remain fixed. - Table of contents are more functional. - Frames side-by-side design allows queries to be posed and answered on the same page, with one frame holding the query form, and the other presenting the results. ## Bad things about frames - Not all browsers support frames. - Search engines don't deal well with frames. - Printing become more difficult. - Creating browser bookmarks may not work. - Saving pages may be more complicated. - Many of these problems are technology issues. Once a solution (and a standard) is found, frames may become more attractive. ## Some conclusions about frames - Use frames when benefits outweigh the disadvantages. - Tables or shared borders can be used instead of frames to place a navigation bar, table of contents, or other items at the edge of the page. - Frames have become much less popular at large websites. ## Examples - **Sites that use frames:** - BMW - Microsoft Library - DePaul University calendar - **Some sites that moved to a frame-free design:** - Amazon.com - CTI - Gap.com ## HTML Frames - When frames are used, the HTML document has a different structure. There is no `<BODY>` tag, since a frame display the content of other pages. ```html <HTML> <HEAD><TITLE></TITLE><HEAD> <FRAMESET> <FRAME SRC="URL"> <FRAME SRC="URL"> </FRAMSET> </HTML> ``` ## <FRAMESET> Attributes - `COLS="160,25%,*"` a 3 columns frameset. - The 1st is 160pixels wide - The 2nd is 25% of the width of the display area - The 3rd covers the remaining space - `ROW="row height 1, row height 2 .."` ## The <FRAME> tag `<FRAME SRC="URL">` URL is the name of the page to be displayed in this frame. If you have a 3 columns frameset you need 3 `<FRAME SRC>` ## <FRAME> Attributes - `FRAMEBORDER = 1 | 0>` - 1: draws a separator between this frame and every adjoining frame, default value - 0: no separator between this frame and every adjoining frame - `SCROLLING = auto | yes | no>` - Set to "no" to prevent scroll bars - `NORESIZE>` - prevents user from resizing the frames ## More <FRAME> Attributes - `NAME = frame_name>` - Identifies each frame in the frameset - Is used to identify that frame when we want to display a page within that frame. - `<A HERF="URL" TARGET=frame_name>` - Frame_name can be any single word except the following ## Reserved TARGET names - `TARGET ="_blank"` loads page in a new blank browser window (no frame) - `TARGET = "_self"` loads page in the same frame as anchor element. The default. - `TARGET = "_parent"` loads page in the parent FRAMESET - `TARGET = "_top"` loads page in the full browser window. This should be the choice for external links ## Client-side Web Application Development ## Forms - HTML Forms are used to select different kinds of user input. - A form is an area that can contain form elements. - Field: Each element in which user can enter information - Field value: Data entered in a field - `<FORM> ...</FORM>`: Encloses the form elements and layout tags - `<INPUT>`: For each field you have to specify the type of input (input box, radio button etc) ## Form structure ```html <FORM> <TABLE> <TR> <TD>First Name: </TD> <TD> <INPUT NAME=FirstName> </TD> </TR> <TR> <TD>Address: </TD> <TD> <INPUT NAME=Address> </TD> </TR> </TABLE> </FORM> ``` - The image above shows a sample registration form with the code of the form underneath. ## How do forms work? - Forms are used on the Web to collect information from users. - The information is then sent to a program running on the Web server called CGI script (Common Gateway Interface) - The CGI script receives the data from the Web page, then acts on that data to perform a certain task ## Forms/CGI script interaction - The image above shows the interaction between the form and a CGI script. ## CGI script languages - AppleScript - C/C++ - Perl - The Unix shell - Visual Basic - ASP ## Figure 6-3 ## PARTS OF A FORM The image above shows the parts of a form. ## Forms - An HTML form is used to collect user input. The user input is most often sent to a server for processing. ## The <form> Element - The HTML `<form>` element is used to create an HTML form for user input: ```html <form> form elements </form> ``` - The `<form>` element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. ## The <input> Element - The HTML `<input>` element is the most used form element. - An `<input>` element can be displayed in many ways, depending on the type attribute. - Here are some examples: | Type | Description | | :------------- | :------------------------------------------------------------------------------------------------------- | | `<input type="text">` | Displays a single-line text input field | | `<input type="radio">` | Displays a radio button (for selecting one of many choices) | | `<input type="checkbox">` | Displays a checkbox (for selecting zero or more of many choices) | | `<input type="submit">` | Displays a submit button (for submitting the form) | | `<input type="button">` | Displays a clickable button | ## <FORM> Attributes - `<FORM NAME=text ACTION=URL METHOD=GET/POST>` - `NAME`: Identifies the form - `ACTION`: Identifies the CGI script that will process the form - `METHOD`: Controls how the browser sends data to the Web server for the CGI Script. - `GET`: Packages the form data by appending it to the end of the URL: specified in the ACTION property - `POST`: Send form information in a separate data stream ## <INPUT> attributes - `<INPUT NAME=text VALUE=text/# SIZE=# MAXLENGTH=# TYPE=predefined>` - `NAME`: Identifies the field - `SIZE`: Of the input box, in characters, default is 20, does not limit the input - `VALUE`: Default text or number that will appear in the field - `MAXLENGTH`: Max # of characters user can input - `TYPE`: text box is the default ## <INPUT TYPE = > - `PASSWORD`: Characters typed by user are displayed as bullets or asterisk - `HIDDEN`: used to pass hidden information to the CGI script (like the email of the person that should receive the form). - The user does not see the content of the field - The user is not allowed to change the value of the hidden field - Usually all hidden fields are placed right after the `<FORM>` tag ## Radio buttons - `<INPUT TYPE=RADIO NAME=text VALUE=value CHECKED>` - Display a list of choices from which the user makes a selection - `NAME`: the field containing the radio button. The same may be used for many buttons. - `VALUE`: the value sent to the CGI script - `CHECKED`: makes the particular radio button the default choice ## Check Boxes - `<INPUT TYPE=CHECKBOX NAME=text VALUE=value CHECKED>` - It is either selected or not. There is only one check box per field - `NAME`: the field containing the check box - `VALUE`: the value sent to the CGI script if the check box is selected (yes/no) - `CHECKED`: makes the particular check box the default choice ## Text area - `<TEXTAREA NAME=text COLS/ROWS=value WRAP=option> Default text </TEXTAREA>` - Allows users to enter comments - `NAME`: the field containing the text area - `ROWS`: number of available lines - `COLS`: number of characters in each line - `WRAP`: - `OFF`: turns off text wrapping - `SOFT (VIRTUAL)`: turn text wrapping on ## Selection lists - `<SELECT NAME=text SIZE=value MULTIPLE> <OPTION> Option 1 <OPTION> Option 2 </SELECT>` - A list box from which the user selects a particular (set of) value(s). (Drop-down menus) - `SIZE`: # of items the list displays in the form - `MULTIPLE`: using the CTR or SHFT key the user can select more than one item ## Form Buttons - `<INPUT TYPE=text VALUE="text">` - Form fields that perform an action when activated (by the user clicking) - `VALUE`: text that appears on the button - `TYPE`: - `SUBMIT`: Submits the form to the CGI script - `RESET`: Cancels or resets the appearance of a form - `BUTTON`: Performs an action within the page by running a script

HTML Notes From Teacher.pdf

Document Details

Related

Full Transcript

Upgrade to continue