Escolar Documentos
Profissional Documentos
Cultura Documentos
HTML Basics
Nidhi Arora
HTML
Short for HyperText Markup Language, the language used to create documents on the World Wide Web. HTML was invented by Tim BernersLee while at CERN, the European Laboratory for Particle Physics in Geneva.
2
HTML
HTML is a collection of styles (indicated by markup tags) that define the various elements of a World Wide Web document. HTML document can be read and displayed by many different browsers running on different types of computers platform independent!
Editor (Notepad) Browser to view results Place to put your web sit (store the files that contain the HTML code, images, music, etc.), preferably on the internet URL for your page (domain name, or folder within a domain) if your page is on the Internet (Links to your page!)
4
HTML
An Web page is best thought of as a set of visual elements (words, paragraphs, lists, tables, images, etc.) HTML defines the structure and layout of the elements on a Web page with a variety of tags. Each tag may have a set of attributes that modify the appearance or layout of the visual element contained by the tag.
HTML tags
Case insensitive
Unrecognised tags are simply ignored by browser!!
Basic structure:
E.g., the BGCOLOUR attribute of BODY tag specifies the colour of the whole document. E.g., the TEXT attribute of BODY tag specifies the default colour of the text in the whole document . <BODY BGCOLOUR = yellow TEXT = purple>
8
<font size=+3>Hello</font>
Output: Hello
Tag attribute
Using both
Headings
Formatting Text
White spaces and blank lines are condensed to one space! Use <BR> for line breaks and <p> for new paragraphs <b>text to be displayed in bold</b> <i>text to be displayed in italics</i> <u>text to be displayed underlined</u> <hr> - draws a horizontal line <center>these will be aligned to the center </center>
Appears as
This is an ordered list: 1. First item 2. Second item 3. Third item This is an unordered list: First item Second item Third item
Add Hyperlink
14
Hyperlinks
<A> </A> is an anchor container tag HREF is an attribute of the anchor tag
<A HREF = http://www.pws.com/aeonline.html> AE Home </A>
Absolute (off-site) vs. Relative (within site) URLs Naming locations within a document:
15
Normally an HTML file opens at the top of the page, yet sometimes users want to reach a specific section further down the page A marker is needed to identify where the section is. E.g. write <A NAME = section1"></A> at the specific section in page 1. Link from the same page
<A HREF = "#section1">jump from same page</A>
Links to sections
Create Links
A Hypertext link
< a href=http://www.iusb.edu>IUSB Home</a> Output: IUSB Home A Email link <a href=mailto:vkwong@iusb.edu> Email me</a> Output: Email me <A href=mailto:x@yahoo.com>contact me</a> <A href=mailto:x@yahoo.com?subject=topic>contact me</a> <A href=mailto:x@yahoo.com?subject=production inf>contact me</a> <A href=mailto:x@yahoo.com?cc=p@najah,edu>contact me</a> <A href=mailto:x@yahoo.com?bc=p@najah.edu>contact me</a> <A href=mailto:?body=Dont forget also to send in your financial statements as soon as possible.>contact me</a>
Add Image
19
Image Formats
.gif
.jpeg or .jpg
.bmp
Image Size
Inserting Image
Place all images in the same directory/folder where you web pages are <img src> is a single tag <img src=image.gif>
Output:
Multi-media: Images
< IMG SRC = cclogo.jpg WIDTH = 300 HEIGHT=100 ALT=Cap College logo >
ALIGN, BORDER, HSPACE, VSPACE USEMAP = map url creates a hyperlink map for image
Tables
25
Table example 1
Table tags
Appears as
Northwest Northeast Southwest Southeast
<table border> <tr> <td>Northwest</td> <td>Northeast</td> </tr> <tr> <td>Southwest</td> <td>Southeast</td> </tr> </table>
Table example 2
<table border=1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>
Heading
Row 1, cell 1 Row 2, cell 1
Another Heading
Row 1, cell 2
Tables format
In HTML, tables are described by a set of rows. Each row has a set of data, which form columns.
<TABLE> <TR> <TH>Heading for first column <TH>Heading for second column </TR> <TR> <TD>Data for first column, row 1 <TD>Data for second column, row 1 </TR>
</TABLE>
28
More on Tables
BORDER, CELLSPACING, CELLPADING, WIDTH e.g., <TABLE BORDER=4, WIDTH=50%> Use BORDER = 0 for no border (e.g., fancy layouts) Common <TD> attributes (most apply to <TR> also): BGCOLOR set the colour of the cell ALIGN, CHAR, VALIGN alignment within cell COLSPAN, ROWSPAN to create merged cells e.g., <TD VALIGN=MIDDLE CHAR=.> 29
Since a <TD> element may contain text, images, lists, links, etc., tables are often used to create complex page layouts! E.g. look at source for Josephs home page. Need to get good at using COLSPAN and ROWSPAN attributes. Best to layout table on paper or using Word first, then jot down COLSPAN and ROWSPAN values for any merged cells write down sequence of <TR> & <TD> tags required. Warning: if you dont design complex tables first, you will get confused and frustrated guaranteed! 30
Forms
31
Forms
A form is an area that can contain form elements. <form></form> Commonly used form elements includes:
Sample Forms
State: <input type=text name="state" value="CA" size=2 maxlength=2> Password: <input type=password name="password"> <input type=checkbox name="moreinfo" value="yes" checked>Send me more info.
Used when you want the user to type letters, number, etc. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
Output
Submission Button
When user clicks on the Submit button, the content of the form is sent to another file. <form name="input" action="html_form_actio n.asp" method="get"> Username: <input type="text" name="user"> <br> <input type="submit" value="Submit"> </form>
Output
Username:
Checkboxes
Used when you want the user to select one or more options of a limited number of choices. <form> <input type="checkbox" name="bike value=bike> I have a bike <br> <input type="checkbox" name="car value=car> I have a car
Output
I have a bike I have a car
Radio Buttons
Used when you want the user to select one of a limited number of choices. <form> <input type="radio" name=x value="male"> Male <br> <input type="radio" name="x" value="female"> Female </form>
Output
Male Female
Used when you want user to respond with one specific answer with choices you given. <p>Select a fruit:</p> <select name"Fruit"> <option selected> Apples <option> Bananas < option > Oranges </select>
Text fields
<html> <body> <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html>
42
Password fields
<html> <body> <form> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters. </p> </body> </html>
43