Introduction to HTML

Introduction to HTML
1 / 69
volgende
Slide 1: Tekstslide
Computer ScienceSecondary Education

In deze les zitten 69 slides, met tekstslides.

Onderdelen in deze les

Introduction to HTML

Slide 1 - Tekstslide

What is HTML?
HTML, otherwise known as HyperText Markup Language, is the language used to create 
Web pages
Using HTML, you can create a Web page with text, graphics, sound, and video

Slide 2 - Tekstslide

Tags
The essence of HTML programming is tags
A tag is a keyword enclosed by angle brackets example: <I> 
There are opening and closing tags for many but not all tags; The affected text is between the two tags
The opening and closing tags use the same command except the closing tag contains and additional forward slash /

Slide 3 - Tekstslide

Tags
For example, the expression <B> Warning </B> would cause the word ‘Warning’ to appear in boldface on a Web page
<B> is the opening tag
Warning is the text
</B> is the closing tag
Warning would display on the page


Slide 4 - Tekstslide

Nested Tags
Whenever you have HTML tags within other HTML tags, you must close the nearest tag first
Example:
<H1> <I> The Nation </I> </H1>

Slide 5 - Tekstslide

Structure of a Web Page
HTML: The entire page
HEAD: Contains information about the data
BODY: Contains the information

Slide 6 - Tekstslide

Structure of a Web Page
<HTML>
            <HEAD>
                           <TITLE> <B>Example </B></TITLE>
            </HEAD>
             <BODY>
            This is where you would include the text and images on your Web page.
             </BODY>
</HTML>

Slide 7 - Tekstslide

The <TITLE> Tag
Choose the title of your Web page carefully; The title of a Web page determines its ranking in certain search engines
The title will also appear on Favorite lists, History lists, and Bookmark lists to identify your page

Slide 8 - Tekstslide

Text Formatting
Manipulating text in HTML can be tricky; Oftentimes, what you see is NOT what you get
For instance, special HTML tags are needed to create paragraphs, move to the next line, and create headings


Slide 9 - Tekstslide

Text Formatting Tags
  1. <B> Bold Face </B> Makes text bold
  2. <I> Italics </I> Makes text Italic
  3. <U> Underline </U> Underlines the text
  4. <P> New Paragraph </P> Starts a New Paragraph
  5. <BR> Next Line Create a line on the page
  6. <i> This is a physical tag that is used to make the text italic.
  7. <em> This is a logical tag that is used to display content in italic.
  8. <mark> This tag is used to highlight text

Slide 10 - Tekstslide

Changing the Font

The expression <FONT FACE = “fontname”> … </FONT> can be used to change the font of the enclosed text
To change the size of text use the expression <FONT SIZE=n> …. </FONT> where n is a number between 1 and 7

Slide 11 - Tekstslide

Changing the Font
To change the color, use <FONT COLOR=“red”>…. </FONT>; The color can also be defined using hexadecimal representation ( Example: #ffffff )
These attributes can be combined to change the font, size, and color of the text all at once; For example, <FONT SIZE=4 FACE=“Courier” COLOR=“red”> …. </FONT>


Slide 12 - Tekstslide

Headings

Web pages are typically organized into sections with headings; To create a heading use the expression <Hn>….</Hn> where n is a number between 1 and 7
In this case, the 1 corresponds to the largest size heading while the 7 corresponds to the smallest size

Slide 13 - Tekstslide

Aligning Text

The ALIGN attribute can be inserted in the <P> and <Hn> tags to right justify, center, or left justify the text

For example, <H1 ALIGN=CENTER> The New York Times </H1> would create a centered heading of the largest size


Slide 14 - Tekstslide

Comment Statements
Comment statements are notes in the HTML code that explain the important features of the code
The comments do not appear on the Web page itself but are a useful reference to the author of the page and other programmers
To create a comment statement use the <!-- …. --> tags

Slide 15 - Tekstslide

The Infamous Blink Tag
It is possible to make text blink using the <BLINK> … </BLINK> tag
However, it is best to use this feature at most sparingly or not at all; What seems like a good idea to a Web designer can become very annoying to a Web user
The <BLINK> tag is not supported by Internet Explorer

Slide 16 - Tekstslide

Page Formatting
To define the background color, use the BGCOLOR attribute in the <BODY> tag
To define the text color, use the TEXT attribute in the <BODY> tag
To define the size of the text, type <BASEFONT SIZE=n>

Slide 17 - Tekstslide

Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
      This is where you would include the text and images on your Web page.
</BODY>
</HTML>

Slide 18 - Tekstslide

Inserting Images  
Type <IMG SRC = “image.ext”>, where image.ext indicates the location of the image file
The WIDTH=n and HEIGHT=n attributes can be used to adjust the size of an image
The attribute BORDER=n can be used to add a border n pixels thick around the image

Slide 19 - Tekstslide

Alternate Text
Some browsers don’t support images. In this case, the ALT attribute can be used to create text that appears instead of the image.
Example:
<IMG SRC=“satellite.jpg” ALT = “Picture of satellite”>

Slide 20 - Tekstslide

Links
A link lets you move from one page to another, play movies and sound, send email, download files, and more….
A link has three parts: a destination, a label, and a target
To create a link type
<A HREF=“page.html”> label </A>

Slide 21 - Tekstslide

Anatomy of a Link
<A HREF=“page.html”> label </A>

In the above link, “page.html” is the destination. The destination specifies the address of the Web page or file the user will access when he/she clicks on the link.
The label is the text that will appear underlined or highlighted on the page

Slide 22 - Tekstslide

Example: Links
To create a link to CNN, I would type:
<A HREF=“http://www.cnn.com”>CNN</A>
To create a link to MIT, I would type:
<A HREF=“http://www.mit.edu”>MIT</A>


Slide 23 - Tekstslide

Changing the Color of Links
The LINK, VLINK, and ALINK attributes can be inserted in the <BODY> tag to define the color of a link
  1. LINK defines the color of links that have not been visited
  2. VLINK defines the color of links that have already been visited
  3. ALINK defines the color of a link when a user clicks on it

Slide 24 - Tekstslide

Using Links to Send Email
To create a link to an email address, type <A HREF=“mailto:email_address”> Label</A>
For example, to create a link to send email to myself, I would type: <A HREF=“mailto: ktdunn@mit.edu”>email Katie Dunn</A>

Slide 25 - Tekstslide

Anchors 
Anchors enable a user to jump to a specific place on a Web site
Two steps are necessary to create an anchor. First you must create the anchor itself. Then you must create a link to the anchor from another point in the document.

Slide 26 - Tekstslide

Anchors
To create the anchor itself, type <A NAME=“anchor name”>label</A> at the point in the Web page where you want the user to jump to
To create the link, type <A HREF=“#anchor name”>label</A> at the point in the text where you want the link to appear

Slide 27 - Tekstslide

Example: Anchor

Slide 28 - Tekstslide

Ordered Lists
Ordered lists are a list of numbered items.
To create an ordered list, type:
<OL>
      <LI> This is step one.
       <LI> This is step two.
       <LI> This is step three.
</OL>

Slide 29 - Tekstslide

Ordered Lists Example

Slide 30 - Tekstslide

More Ordered Lists
The TYPE=x attribute allows you to change the the kind of symbol that appears in the list.
  • A is for capital letters
  • a is for lowercase letters
  • I is for capital roman numerals
  • i is for lowercase roman numerals

Slide 31 - Tekstslide

Unordered Lists
An unordered list is a list of bulleted items
To create an unordered list, type:
<UL>
        <LI> First item in list
        <LI> Second item in list
        <LI> Third item in list
</UL>

Slide 32 - Tekstslide

Unordered Lists Example

Slide 33 - Tekstslide

More Unordered Lists
The TYPE=shape attribute allows you to change the type of bullet that appears
  • circle corresponds to an empty round bullet
  • square corresponds to a square bullet
  • disc corresponds to a solid round bullet; this is the default value

Slide 34 - Tekstslide

Forms
What are forms?
An HTML form is an area of the document that allows users to enter information into fields.
A form may be used to collect personal information, opinions in polls, user preferences and other kinds of information.

Slide 35 - Tekstslide

Forms
There are two basic components of a Web form: the shell, the part that the user fills out, and the script which processes the information
HTML tags are used to create the form shell. Using HTML you can create text boxes, radio buttons, checkboxes, drop-down menus, and more...

Slide 36 - Tekstslide

Example: Form 

Slide 37 - Tekstslide

The Form Shell
A form shell has three important parts:
  •  the <FORM> tag, which includes the address of the script which will process the form
  • the form elements, like text boxes and radio buttons
  • the submit button which triggers the script to send the entered information to the server

Slide 38 - Tekstslide

Creating the Shell
To create a form shell, type <FORM METHOD=POST ACTION=“script_url”> where “script_url” is the address of the script
Create the form elements
End with a closing </FORM> tag

Slide 39 - Tekstslide

Creating Text Boxes
To create a text box, type <
  1. INPUT TYPE=“text” NAME=“name” VALUE=“value” SIZE=n MAXLENGTH=n>
The NAME, VALUE, SIZE, and MAXLENGTH attributes are optional

Slide 40 - Tekstslide

Text Box Attributes
The NAME attribute is used to identify the text box to the processing script
The VALUE attribute is used to specify the text that will initially appear in the text box
The SIZE attribute is used to define the size of the box in characters
The MAXLENGTH attribute is used to define the maximum number of characters that can be typed in the box


Slide 41 - Tekstslide

Example: Text Box
First Name: <INPUT
 TYPE="text" NAME="FirstName"
 VALUE="First Name" SIZE=20>
<BR><BR>
Last Name: <INPUT 
TYPE="text" NAME="LastName" 
VALUE="Last Name" SIZE=20>
<BR><BR>




Slide 42 - Tekstslide

Creating Larger Text Areas
To create larger text areas, type <TEXTAREA NAME=“name” ROWS=n1 COLS=n2 WRAP> Default Text </TEXTAREA>, where n1 is the height of the text box in rows and n2 is the width of the text box in characters
The WRAP attribute causes the cursor to move automatically to the next line as the user types

Slide 43 - Tekstslide

Example: Text Area
<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments" ROWS=10 COLS=50 WRAP>
</TEXTAREA>

Slide 44 - Tekstslide

Creating Radio Buttons
To create a radio button, type <INPUT TYPE=“radio” NAME=“name” VALUE=“data”>Label, where “data” is the text that will be sent to the server if the button is checked and “Label” is the text that identifies the button to the user

Slide 45 - Tekstslide

Example: Radio Buttons
<B> Size: </B>
 <INPUT TYPE="radio" NAME="Size"
      VALUE="Large">Large
 <INPUT TYPE="radio" NAME="Size"
      VALUE="Medium">Medium
 <INPUT TYPE="radio" NAME="Size"
   VALUE="Small">Small

Slide 46 - Tekstslide

Creating Checkboxes
To create a checkbox, type <INPUT TYPE=“checkbox” NAME=“name” VALUE=“value”>Label
If you give a group of radio buttons or checkboxes the same name, the user will only be able to select one button or box at a time

Slide 47 - Tekstslide

Example: Checkboxes
       <B> Color: </B>
  <INPUT TYPE="checkbox" NAME="Color" VALUE="Red">Red
  <INPUT TYPE="checkbox" NAME="Color"
              VALUE="Navy">Navy
            <INPUT TYPE="checkbox" NAME="Color"
              VALUE="Black">Black

Slide 48 - Tekstslide

Creating Drop-down Menus
To create a drop-down menu, type <SELECT NAME=“name” SIZE=n MULTIPLE>
Then type <OPTION VALUE= “value”>Label
In this case the SIZE attribute specifies the height of the menu in lines and MULTIPLE allows users to select more than one menu option


Slide 49 - Tekstslide

Example: Drop-down Menu
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>

Slide 50 - Tekstslide

Creating a Submit Button
To create a submit button, type <INPUT TYPE=“submit”>
If you would like the button to say something other than submit, use the VALUE attribute

For example, <INPUT TYPE=“submit” VALUE=“Buy Now!”> would create a button that says “Buy Now!”

Slide 51 - Tekstslide

Creating a Reset Button
To create a reset button, type <INPUT TYPE=“reset”>
The VALUE attribute can be used in the same way to change the text that appears on the button

Slide 52 - Tekstslide

Creating a Tables
Tables can be used to display rows and columns of data, create multi-column text, captions for images, and sidebars
The <TABLE> tag is used to create a table; the <TR> tag defines the beginning of a row while the <TD> tag defines the beginning of a cell


Slide 53 - Tekstslide

Adding a Border
The BORDER=n attribute allows you to add a border n pixels thick around the table
To make a solid border color, use the BORDERCOLOR=“color” attribute
To make a shaded colored border, use BODERCOLORDARK=“color” and BORDERCOLORLIGHT=“color”

Slide 54 - Tekstslide

Creating Simple Table
<TABLE BORDER=10>
 <TR>
  <TD>One</TD>
  <TD>Two</TD>
 </TR>
 <TR>
  <TD>Three</TD>
  <TD>Four</TD>
 </TR>
</TABLE>

Slide 55 - Tekstslide

Adjusting the Width
When a Web browser displays a table, it often adds extra space. To eliminate this space use the WIDTH =n attribute in the <TABLE> and <TD> tags
Keep in mind - a cell cannot be smaller than its contents, and if you make a table wider than the browser window, users will not be able to see parts of it.

Slide 56 - Tekstslide

Centering a Table
There are two ways to center a table
 Type <TABLE ALIGN=CENTER>
Enclose the <TABLE> tags in opening and closing <CENTER> tags

Slide 57 - Tekstslide

Wrapping Text around a Table
It is possible to wrap text around a table. This technique is often used to keep images and captions together within an article.
To wrap text around a table, type <TABLE ALIGN = LEFT> to align the table to the left while the text flows to the right.
Create the table using the <TR>, <TD>, and </TABLE> tags as you normally would

Slide 58 - Tekstslide

Adding Space around a Table
To add space around a table, use the HSPACE=n and VSPACE=n attributes in the <TABLE> tag
Example:
<TABLE HSPACE=20 VSPACE=20>

Slide 59 - Tekstslide

Spanning Cells Across Columns 
It is often necessary to span one cell across many columns. For example, you would use this technique to span a headline across the columns of a newspaper article.
To span a cell across many columns, type <TD COLSPAN=n>, where n is the number of columns to be spanned

Slide 60 - Tekstslide

Spanning Cells Across Rows
To span a cell across many rows, type <TD ROWSPAN=n>, where n is the number of rows

Slide 61 - Tekstslide

Aligning Cell Content
By default, a cell’s content are aligned horizontally to the left and and vertically in the middle.
Use VALIGN=direction to change the vertical alignment, where “direction” is top, middle, bottom, or baseline 
Use ALIGN=direction to change the horizontal alignment where “direction” is left, center, or right

Slide 62 - Tekstslide

Controlling Cell Spacing
Cell spacing is the space between cells while cell padding is the space around the contents of a cell
To control both types of spacing, use the 
  • CELLSPACING =n and 
  • CELLPADDING=n attributes in the 
  • <TABLE> tag

Slide 63 - Tekstslide

Nesting Tables 
Create the inner table
Create the outer table and determine which cell of the outer table will hold the inner table
Test both tables separately to make sure they work
Copy the inner table into the cell of the outer table
Don’t nest too many tables. If you find yourself doing that, find an easier way to lay out your Web page

Slide 64 - Tekstslide

Changing a Cell’s Color
To change a cell’s color, add the BGCOLOR=“color” attribute to the <TD> tag
Example:
<TD BGCOLOR=“blue”>

Slide 65 - Tekstslide

Dividing Your Table into Column Groups
You can divide your table into two kinds of column groups: structural and non-structural.
Structural column groups control where dividing lines are drawn; Non-structural groups do not
Both let you format an entire column of cells at once

Slide 66 - Tekstslide

Column Groups  
To create structural column groups, type <COLGROUP SPAN=n> after the <TABLE> tag, where n is the number of columns in the group
To create non-structural column groups, type <COL SPAN=n>, where n is the number of columns in the group

Slide 67 - Tekstslide

Dividing Table into Horizontal Sections
You can also create a horizontal section consisting of one or more rows. This allows you to format the rows all at once
 To create a horizontal section, type <THEAD>, <TBODY>, or <TFOOT> before the first <TR> tag of the section
Netscape does not support these tags

Slide 68 - Tekstslide

Controlling Line Breaks
Unless you specify otherwise a browser will divide the lines in a cell as it sees fit.
The NOWRAP attribute placed within the <TD> tag forces the browser to keep all the text in a cell on one line
Example:
<TD NOWRAP>Washington, D.C.

Slide 69 - Tekstslide