Download presentation
Presentation is loading. Please wait.
1
Web Programming– UFCFB3-30-1 Lecture 5
Instructor : Mazhar H Malik Global College of Engineering and Technology
2
Introductions to HTML LO 2,5,6
Lecture 5 Introductions to HTML LO 2,5,6 9/13/2018 Lecture 5
3
In this lecture… HTML Heading, Paragraph Text formatting Image Marquee
Create a link Comments 9/13/2018 Lecture 5
4
HTML Hypertext Markup Language
The language used to create web documents Current version is HTML 4.01 All page elements are identified by special tags The tags give the browser instructions on how to display the content the tags themselves don’t display 9/13/2018 Lecture 5
5
HTML Tags are enclosed in < and > Example: <title> tag
Tags are nested Tags may be UPPERCASE or lowercase. This paper uses lowercase as the standard Future iterations of HTML will require lowercase, so it is a good habit to start with 9/13/2018 Lecture 5
6
HTML Example <html> <head>
<title>Title of page</title> </head> <body> <p>This is my first page.<p> </body> </html> 9/13/2018 Lecture 5
7
HTML page structure html head body title p b i ….. 9/13/2018 Lecture 5
8
HTML page structure <html> </html>
Defines the text file as being in HTML format. This is found on the beginning and end of each web page. <head> </head> The heading area of a the page. <title> </title> Defines the title displayed at the title bar of the browser window. <body> </body> Found after the <head> tag and is used to define the area of the file which formats the way the web page is seen. 9/13/2018 Lecture 5
9
Pairs and stand-alone Most tags come in pairs
Start tag and End tag E.g. <b> and </b> There are some standalone tags, e.g. <br> which inserts a line break <hr> which inserts a horizontal rule (i.e. a line) 9/13/2018 Lecture 5
10
Some tags have attributes
These extend or modify a tag’s actions (note American spelling) Example: <body bgcolor=“#000000”> …</body> The tag is the body tag; this is the area within the browser window The attribute is bgcolor (background color), and has the value “#000000”, which is black 9/13/2018 Lecture 5
11
Background attribute The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. Large image file increase the loading time. <body background="clouds.gif"> 9/13/2018 Lecture 5
12
Heading Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading 9/13/2018 Lecture 5
13
Paragraph Paragraphs are defined with the <p> tag.
HTML automatically adds an extra blank line before and after a paragraph. 9/13/2018 Lecture 5
14
Heading and Paragraph Example
<html> <body> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> <p> this is default paragraph text</p> </body> </html> 9/13/2018 Lecture 5
15
Line Breaks The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. The <br> tag is an empty tag. It has no closing tag. Example <p>This <br> is a para<br>graph with line break</p> 9/13/2018 Lecture 5
16
Horizontal Rule The <hr>tag defines a horizontal rule.
The <br> and <hr> tag is an empty tag. It has no closing tag. Example <p>Good morning <hr> this is under the line</p> 9/13/2018 Lecture 5
17
Text formatting using HTML
HTML use different tags for text formatting <b> bold text <i> italic text <big> big text <small> small text <sub>subscript text <sup>superscript text 9/13/2018 Lecture 5
18
Text formatting Example
<html><body> <p> this is default text</p> <b>This text is bold</b><br> <i>This text is italic</i><br> <big>This text is big</big><br> <small>This text is small</small><br> This text contains<sub>subscript</sub><br> This text contains<sup>superscript</sup> </body></html> 9/13/2018 Lecture 5
19
Image HTML use <img> tag to insert an image.
src attribute locate the (source) file of the image. alt attribute display a text message if the browser is unable to show the image. 9/13/2018 Lecture 5
20
Image example <html> <body>
<p>This is Oman's flag </p> <img src="oman.gif“ alt=“oman flag picture" > </body> </html> 9/13/2018 Lecture 5
21
Marquee is a moving text in you web site. Marquee make your site more attractive. The following marquee is moving to left . <marquee width=200 height=50 direction=left bgcolor=yellow> Hi There </marquee> 9/13/2018 Lecture 5
22
Marquee The following marquee is moving to right with a delay of 400 ms. <marquee width=200 height=50 direction=right behavior=alternate scrolldelay=400 bgcolor=red> this is marquee </marquee> 9/13/2018 Lecture 5
23
Create a link 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. 9/13/2018 Lecture 5
24
The Anchor Tag and the Href Attribute
The syntax of creating an anchor: <a href="url">Text to be displayed</a> the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. 9/13/2018 Lecture 5
25
Link Example <html> <body>
<p> If you want to check you hotmail <a href=" here</a></p> </body> </html> 9/13/2018 Lecture 5
26
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. Example <!-- This is a comment --> 9/13/2018 Lecture 5
27
Ordered List An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol> <li>Coffee</li> <li>Milk</li> </ol> 9/13/2018 Lecture 5
28
Unordered List An unordered list is a list of items.
The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul> <li>Coffee</li> <li>Milk</li> </ul> 9/13/2018 Lecture 5
29
Tables Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. 9/13/2018 Lecture 5
30
Tables Example <table border="1"> <tr>
<td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> 9/13/2018 Lecture 5
31
Create Page Template To build effective page templates, you must be familiar with the HTML table elements and attributes The <table> element contains the table information, which consists of table row elements <tr>, and individual table data cells <td>. These are the three elements you will use most frequently when you are building tables. 9/13/2018 Lecture 5
32
Page Thumbnail 9/13/2018 Lecture 5
33
9/13/2018 Lecture 5
34
Same Page Template 9/13/2018 Lecture 5
35
Summary HTML use different (elements) tags to format web pages.
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. HTML supports images, links. Also support tables, lists. 9/13/2018 Lecture 5
Similar presentations
