You are on page 1of 47

Main Content

• HTML • ASP • Exercises

• 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

• Command is enclosed by ”hooks”. < and > • A HTML-command is called a tag <b> • It has to be closed with an end-tag </b> .Marks – ”Tags” • HTML is a marking language • Commands for format and layout is included in the text.

Framework in a webpage • Framework tells the web browser. • Every webpage need tags that defines the head section in the document. how the text and commands should be interpreted. .

Structure of HTML-pages Structure syntax of HTML-page: <html> <head> <title> …text… </title> </head> <body> (Your code) </body> </html> .

size and font • Syntax is: example: <tag property=”value”> <body bgcolor=”red”> .Properties and values • Tags contain different information about properties like color.

Active link <body alink=”#Color index”> .Visited link <body vlink=”#Color index”> .Unvisited link <body ulink=”#Color index”> .Ordinary text <body text=”#Color index”> .Properties to <BODY> • Adjustment of background <body bgcolor=”#Color index or name”> • Adjustment of Text .

yellow . white.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.

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 does´nt understand Test the code in different web browsers • • • .

Physical .Formatting of text • Commands for changing the layout of text • Two types of tags: .Logical .

Physical tags <b> <i> <strike> <u> <blink> bold italic line through underlined blinking text (only netscape) .

Headings • 6 heading sizes • <hn> . <h2>. h3>… .<h1>.

size and font of text .Structure tags <hr> <br> <p> <c> horisontal line break row new textarea centred adjusted <p align=”right”> right adjusted <font> color.

Exercise 1 Textformatting • Start Notepad. • Open the file in the browser . 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.

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” .

gif”></a> . • Link syntax: Textlink <a href=”filename”> text on link </a> Picturelink <a href=”url”><img src=”picture.Links • Links together documents in the same site or anywhere on Internet.

org”> linktext</a> .htm”> linktext </a> Under-catalog <a href=”products/report..htm”> linktext </a> Catalog up in the structure <a href=”.w3.Links Same catalog <a href=”report.htm”> linktext </a> Other website – complete URL <a href=”http://www./report.

• Also make a textlink somewhere in the text.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.

Tables • Tables are build with cells. Syntax: <table></table> <th> <td> <tr> • Starts/ends table Table header Table column Table row . up to down. from left to right.

tablelines disappear.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”. .

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 .

< and >) • Many characters does not exist in standard collection. . • Several blanks only become one blank in webbrowser.Special characters • Writing special characters with entities is a necessity if the character is a part of the language of HTML (ex. hard blank copes with that.

Special characters Character Code > < & € ” &gt. &#148. &amp. &lt. . &Euro. Hard blank &nbsp.

se> linktext</a> .hamren@scb.MailTo • • Link for sending mail to an email adress Syntax: <a href=mailto:linda.

Add a MailTo which leads to your own adress.Exercise 3 Tables 1. It should contain all people in class with firstname and surname. Add a nice looking table to your webpage. possibly age!!! 1. .

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.

attribute • With type -attribute.Type . Plain text Chechbox Radiobutton Button Own button Password type=“text” type=“checkbox” type=“radio” type=“submit” type=“image” type=“password” . the type of <input> tag is specified.

<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” .

If user has marked a checkbox. Have to contain name and value .If nothing is marked. value = “valuetext“ is returned . nothing is returned • If several boxes are marked. values are returned comma separated. .checkbox • • User can choose between several alternatives.

Value is put in value • Don’t use just one button .radiobutton • • Only one alternative can be chosen A group of radiobuttons have the same name but different values .

Reset (type= “reset”) Standard text of those are changed by value=“text” Submit sends data to server and resets form • • .Send (type=“submit”) .Buttons • • Executed immediately Two types: .

<input type=“hidden” name=“text” value=“data”> .Hidden fields • Can send data to server without involvement of user.

<select> • <select size=“2”> <option value=“value”>text</option> <option value=“value”>text</option> </select> • • If multiple-attribute is added. . makes the element preselected. To add selected-attribute in <option>. several elements can be chosen by user.

Make a nice looking form where you can register following personal information: Name Sex Email Occupation Area of interest (textbox) (radiobutton) (textbox) (selectbox) (checkbox) .Exercise 4 Forms 1. Create a new webpage 2.

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.

*%”> * = all space left . *”> <frameset cols=”25%. 50%.Frames • • • • • Syntax: <frameset>…</frameset> <frameset rows=”150. 300.

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 .

htm" target="middle"> Scrolling scrolling=”yes/no/auto” NoSize-changing noresize=”noresize” • • • .htm” name=”middle”> Make page open in one of the frames through link <a href="King.Frames • Put webpage in frame: <frame src= ”Page.

3. . 2. Create a special framedocument with the same division as the example.Exercise 5 Frames 1. The left page should contain a linklist. 4. Your own webpage from Exercise 1-3 should be shown in the middle window. call it ”Total”. The top page should have a heading. One of the links should go to your form in exercise 4.

positioning. We can control colors. A layout language which allows us to connect different layots to different HTML-commands and create own classes.CSS – layout templates • • • • Cascading style sheet is a standard for layout on webb. font… Frameworks contains rules how webpage should look .

<style> p {font-size: 30pt} </style> • Linked format-template: Extern CSS-file linked to document <link rel=”stylesheet” href=”style.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.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=”">Go to top</a> .cnn.htm#top">Go to top</a> • From another server <a href=”http://www.

Exercise 6 Internal References Create a bookmark from the bottom of your webpage to the top of the page. .