Structure of HTML I

Main Content
HTML ASP Exercises
Introduction
Previous knowledge in area??
Introduction to HTML
A Webpage is a page with HTML-text A number of linked pages in one place are called a website. Hyper Text Markup Language
Introduction to HTML
Two programs needed form creating a webpage - An editor (i.e Notepad) - A webbrowser (i.e Netscape, IE) Change mode while developing Webbrowser interpret the code in file
Marks Tags
HTML is a marking language Commands for format and layout is included in the text. Command is enclosed by hooks, < and > A HTML-command is called a tag <b> It has to be closed with an end-tag </b>
Framework in a webpage
Framework tells the web browser, how the text and commands should be interpreted. Every webpage need tags that defines the head section in the document.
Structure of HTML-pages
Structure syntax of HTML-page:
<html> <head>
<title> text </title> </head>

<body>
(Your code) </body> </html>
Properties and values

Tags contain different information about properties like color, size and font Syntax is:
example:
<tag property=value>
<body bgcolor=red>
Properties to <BODY>
Adjustment of background
<body bgcolor=#Color index or name>
Adjustment of Text - Ordinary text <body text=#Color index> - Visited link <body vlink=#Color index> - Unvisited link <body ulink=#Color index> - Active link <body alink=#Color index>
How colors are defiend

Color indexes: Red = #FF0000 Green = #00FF00 Blue = #0000FF Black = #000000 White = #FFFFFF
Orange = #FF7F00 Gold = #CD7F32 Pink = #BC8F8F
Name for colors: example: black, white, yellow
Versions and compability

There are different web browsers and versions of them that understand different versions of HTML.
Netscape and Microsoft have developed their own extensions. Webbrowsers ignore tags it doesnt understand Test the code in different web browsers
Formatting of text
Commands for changing the layout of text
Two types of tags: - Physical - Logical
Physical tags
<b> <i> <strike> <u> <blink> bold italic line through underlined blinking text (only netscape)
Headings
6 heading sizes <hn> - <h1>, <h2>, h3>
Structure tags
<hr> <br> <p> <c> horisontal line break row new textarea centred adjusted <p align=right> right adjusted <font> color, size and font of text
Exercise 1
Textformatting Start Notepad. Save document with extension .htm Use the HTML-framework Change backcolor of your page Write a text or use textfile and try some of the physical and structure tags. Open the file in the browser
Pictures
Pictures are separate files Linked in to document with syntax
<img src=filename or URL>
Take time to download <img> can have several attributes:

height=n width=n
Links
Links together documents in the same site or anywhere on Internet.
Link syntax:
Textlink <a href=filename> text on link </a> Picturelink <a href=url><img src=picture.gif></a>
Links
Same catalog
<a href=report.htm> linktext </a>
Under-catalog
<a href=products/report.htm> linktext </a>
Catalog up in the structure

<a href=../report.htm> linktext </a>
Other website complete URL

<a href=http://www.w3.org> linktext</a>
Exercise 2
Adding pictures and links
Add two pictures to your webpage, one from your map and steal one from another website (URL). One of the pictures should be a link. Also make a textlink somewhere in the text.
Tables
Tables are build with cells, from left to right, up to down.
Syntax: <table></table> <th> <td> <tr>
Starts/ends table Table header Table column Table row
Tables
<Table> have properties: cellpadding Margin between text and cellframes cellspacing Between cells align Textplacement in cell width Width in pixels or % of screen border By putting property border=0, tablelines disappear.
Tables
Letting the tablecell span over several rows or columns, use the properties rowspan and colspan Example:
<td colspan=2>
span the cell over 2 columns

<td rowspan=2>
span the cell over 2 rows
Special characters
Writing special characters with entities is a necessity if the character is a part of the language of HTML (ex. < and >)
Many characters does not exist in standard collection. Several blanks only become one blank in webbrowser, hard blank copes with that.
Special characters
Character Code
> <
&
> <
& &Euro;
Hard blank
MailTo
Link for sending mail to an email adress

Syntax: <a href=mailto:linda.hamren@scb.se> linktext</a>
Exercise 3
Tables
1. Add a nice looking table to your webpage. It should contain all people in class with firstname and surname, possibly age!!!
1. Add a MailTo which leads to your own adress.
Form
Makes communication with user possible

Requirement web programming language like ASP.
Form
Consists of a number of elements
text row or button for input
several text rows for input choose between for defined values
<input>
<textarea> <select>
Every tag has to have a unique name Form must have a specific button to send data to server.
Type - attribute
With type -attribute, the type of <input> tag is specified. Plain text Chechbox Radiobutton Button Own button Password type=text type=checkbox type=radio type=submit type=image type=password
<input>
Width of input area (number of characters) size=x Maximum number of characters possible Maxlength=x Name of variable which contains the value Name=name (I.e txtName) Text placed in text-area by you Value=prechosen text
checkbox
User can choose between several alternatives. Have to contain name and value - If user has marked a checkbox, value = valuetext is returned - If nothing is marked, nothing is returned
If several boxes are marked, values are returned comma separated.
radiobutton
Only one alternative can be chosen

A group of radiobuttons have the same name but different values - Value is put in value
Dont use just one button
Buttons
Executed immediately Two types: - Send (type=submit) - Reset (type= reset) Standard text of those are changed by value=text Submit sends data to server and resets form
Hidden fields
Can send data to server without involvement of user.
<input type=hidden name=text value=data>
<select>
<select size=2> <option value=value>text</option> <option value=value>text</option> </select>
If multiple-attribute is added, several elements can be chosen by user. To add selected-attribute in <option>, makes the element preselected.
Exercise 4
Forms
1. Create a new webpage 2. Make a nice looking form where you can register following personal information:
Name Sex Email Occupation Area of interest (textbox) (radiobutton) (textbox) (selectbox) (checkbox)
Frames
Divides the screen into independent windows

Two steps: - Create all pages that will be shown in frames
- Use a special frame-document which activates the different frames.
Frames

Syntax: <frameset></frameset> <frameset rows=150, 300, *> <frameset cols=25%, 50%, *%>
* = all space left
Frames
To hide the border between the frames, use 3 properties in <frameset>-tag <frameset frameborder=0> <frameset framespacing=0> <frameset border=0>
Use all 3 to be sure!
ie ie netscape
Frames
Put webpage in frame: <frame src= Page.htm name=middle> Make page open in one of the frames through link <a href="King.htm" target="middle">
Scrolling scrolling=yes/no/auto NoSize-changing noresize=noresize
Exercise 5
Frames
1. Create a special framedocument with the same division as the example, call it Total. 2. Your own webpage from Exercise 1-3 should be shown in the middle window. 3. The left page should contain a linklist. One of the links should go to your form in exercise 4. 4. The top page should have a heading.
CSS layout templates
Cascading style sheet is a standard for layout on webb. A layout language which allows us to connect different layots to different HTML-commands and create own classes. We can control colors, positioning, font Frameworks contains rules how webpage should look
CSS layout templates
Inline format-template: Affects the tag where styleattribute occures <p style=font-size: 30pt> Inserted format-template: Affects all p-tags in whole document.
<style> p {font-size: 30pt} </style>
Linked format-template: Extern CSS-file linked to document

<link rel=stylesheet href=style.css type=text/css
Internal references
An anchor on a webpage where you can link.
Syntax: <a name=name> text or picture</a> Example: <a name="top">Top</a> <a href="#top">Go to top</a>
Internal references
From same document
<a href="#top">Go to top</a>
From another page

<a href=document.htm#top">Go to top</a>
From another server

<a href=http://www.cnn.com#topp">Go to top</a>
Exercise 6
Internal References
Create a bookmark from the bottom of your webpage to the top of the page.

Structure of HTML I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Structure of HTML I

Uploaded by

Copyright:

Available Formats

Main Content

HTML ASP Exercises

<title> text </title> </head>

(Your code) </body> </html>

Properties and values

How colors are defiend

Orange = #FF7F00 Gold = #CD7F32 Pink = #BC8F8F

Name for colors: example: black, white, yellow

Versions and compability

Take time to download <img> can have several attributes:

Catalog up in the structure

Other website complete URL

Starts/ends table Table header Table column Table row

span the cell over 2 columns

span the cell over 2 rows

Hard blank &nbsp;

Link for sending mail to an email adress

Makes communication with user possible

If several boxes are marked, values are returned comma separated.

Only one alternative can be chosen

Dont use just one button

Divides the screen into independent windows

CSS layout templates

CSS layout templates

Linked format-template: Extern CSS-file linked to document

From another page

From another server

You might also like

Hard blank