Presentation is loading. Please wait.

Presentation is loading. Please wait.

IT Engineering I Instructor: Behrang Assemi

Published bySydney Caldwell Modified over 6 years ago

Similar presentations

Presentation on theme: "IT Engineering I Instructor: Behrang Assemi"— Presentation transcript:

1 IT Engineering I Instructor: Behrang Assemi tbassemi@gmail.com
HTML IT Engineering I Instructor: Behrang Assemi

2 What is HTML? Hypertext Markup Language
Hypertext:Text with links to other documents A key technology for the Web A simple language for specifying document structure and content "page description language" Derived from the Standard Generalized Markup Language (SGML) language system

3 What is Markup? HTML An <emph>important</emph> concept
Markup languages have special elements that mark formatting or semantics The marks are ASCII text "inserted" into the ASCII text representing document content Unlike programming languages, data is primary HTML An <emph>important</emph> concept LaTeX An {\em important} concept

4 HTML Markup (Tags) Simple start tag: <TITLE>
End tag: </TITLE> Start tag with attributes: <body bgcolor=white> <body bgcolor="white" >

5 Tag syntax (1) tag ::= < element-name attribute-pair* > attribute-pair ::= attribute-name = string element-name ::= sequence of letters and digits, starting with letter attribute name ::= same as element-name string ::= sequence of characters, often quoted

6 Tag and Element syntax (2)
Tags are mostly case-insensitive exception: some attribute values End tags element-name is preceded by a slash / never have attributes Boolean attributes don’t need values

7 Practicing HTML! If you make a mistake in HTML… What do you need?
you will not bomb or crash; your web page just won't look right. It is easy to correct the code. What do you need? A web browser Internet Explorer Mozilla FireFox SeaMonkey Opera A text editor Notepad Notepad++ UltraEdit

8 HTML Structure Minimal legal HTML document: <html> <head>
<title> Test Document</title> </head> <body> <!– This is a comment Content goes here --> </body> </html>

9 HTML has two parts HEAD: Information about the document
TITLE: appears in title bar META: description of your page <meta name="description" content="Free Web tutorials on HTML"> This meta element defines keywords for your page: <meta name="keywords" content="HTML,XML,JavaScript"> Other <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> BODY: visible content of document For now: we ignore scripts and frames Two kinds: block structure phrase structure

10 First HTML Example 5 <!-- Fig. 4.1: main.html --> 6 <!-- Our first Web page --> 7 8 <html> 9 <head> 10 <title>Internet and WWW How to Program - Welcome</title> 11 </head> <body> 14 <p>Welcome to XHTML!</p> 15 </body> 16 </html>

11 Headers/Headings Headers/Headings
Six levels (H1… H6) <h1>Most major heading</h1> <h2>Next level heading</h2> <h3>Next level heading</h3> <h4>Next level heading</h4> <h5>Next level heading</h5> <h6>Least major heading</h6>

12 Headers/Headings (example)
5 <!-- Fig. 4.4: header.html --> 6 <!-- XHTML headers --> 7 8 <html xmlns = " 9 <head> 10 <title>Internet and WWW How to Program - Headers</title> 11 </head> <body> <h1>Level 1 Header</h1> 16 <h2>Level 2 header</h2> 17 <h3>Level 3 header</h3> 18 <h4>Level 4 header</h4> 19 <h5>Level 5 header</h5> 20 <h6>Level 6 header</h6> </body> 23 </html>

13

14 Linking Anchor <a>: basis of hypertext links
defines a section of linkable material <HREF>: URL of link target Example <a href=" > A Link to Somewhere Else </a>

15 15 <h1>Here are my favorite sites</h1> <p><strong>Click a name to go to that page.</strong></p> <!-- Create four text hyperlinks --> 20 <p><a href = " <p><a href = " Hall</a></p> <p><a href = "

16

17 5 <. -- Fig. 4. 6: contact. html --> 6 <
5 <!-- Fig. 4.6: contact.html --> 6 <!-- Adding hyperlinks --> 7 8 <html> 9 <head> 10 <title>Internet and WWW How to Program - Contact Page</title> 11 </head> <body> <p> 16 My address is 17 <a href = </a> 20 . Click the address and your browser will 21 open an message and address it to me. 22 </p> 23 </body> 24 </html>

18

19 Lists Lists Simple lists all use "list items" <LI> (end optional) Unordered lists <UL></UL> Ordered lists <OL></OL> Definition lists Definition list <Dl></DL> Definition term<DT> Definition data <DD> Lists of all types may be nested -- Don’t forget the end tags!

20

21 5 <. -- Fig. 4. 10: links2. html --> 6 <
5 <!-- Fig. 4.10: links2.html --> 6 <!-- Unordered list containing hyperlinks --> 7 8 <html> 9 <head> 10 <title>Internet and WWW How to Program - Links</title> 11 </head> <body> <h1>Here are my favorite sites</h1> <p><strong>Click on a name to go to that page.</strong></p> <!-- create an unordered list --> 20 <ul> <!-- add four list items --> 23 <li><a href = " <li><a href = " <li><a href = " <li><a href = " 30 </ul> 31 </body> 32 </html>

22

23

24 5 <. -- Fig. 4. 11: list. html --> 6 <
5 <!-- Fig. 4.11: list.html --> 6 <!-- Advanced Lists: nested and ordered --> 7 8 <html> 9 <head> 10 <title>Internet and WWW How to Program - Lists</title> 11 </head> <body> <h1>The Best Features of the Internet</h1> <!-- create an unordered list --> 18 <ul> 19 <li>You can meet new people from countries around 20 the world.</li> 21 <li> 22 You have access to new media as it becomes public: 23

25 24 <. -- this starts a nested list, which uses a --> 25 <
24 <!-- this starts a nested list, which uses a --> 25 <!-- modified bullet. The list ends when you --> 26 <!-- close the <ul> tag. --> 27 <ul> 28 <li>New games</li> 29 <li> 30 New applications <!-- nested ordered list --> 33 <ol> 34 <li>For business</li> 35 <li>For pleasure</li> 36 </ol> 37 </li> <li>Around the clock news</li> 40 <li>Search engines</li> 41 <li>Shopping</li> 42 <li> 43 Programming <!-- another nested ordered list --> 46 <ol> 47 <li>XML</li> 48 <li>Java</li>

26 49 <li>XHTML</li> 50 <li>Scripts</li> 51 <li>New languages</li> 52 </ol> </li> </ul> <!-- ends the nested list of line 27 --> 57 </li> <li>Links</li> 60 <li>Keeping in touch with old friends</li> 61 <li>It is the technology of the future!</li> </ul> <!-- ends the unordered list of line 18 --> </body> 66 </html>

27

28 Block Structure Paragraph: <p> (end optional)
<BR> forced line break <HR> horizontal rule <PRE> preformatted text Preserves spaces and line breaks

29 Presentation Phrase Structure
Whitespace is collapsed Font changes Bold <B> , italic <I> , Teletype text <TT> <FONT> specifies font to use, deprecated <font size="3" color="red"> This is some text! </font> <font size="1" color="blue"> This is some text! </font> <font face="arial" color="red"> This is some text! </font> Emphasis <EM>, <STRONG>, <CODE>, etc. Subscripts <SUB> and superscripts <SUP> This is some text!

30 Images Images <IMG> Example: SRC attribute: URL of image
ALT attribute: alternative text Example: <IMG SRC= "martian.gif" WIDTH=100 HEIGHT=100 ALT="Martian" >

31 5 <. -- Fig. 4. 7: picture. html --> 6 <
5 <!-- Fig. 4.7: picture.html --> 6 <!-- Adding images with XHTML --> 7 8 <html> 9 <head> 10 <title>Internet and WWW How to Program - Welcome</title> 11 </head> <body> <p> 16 <img src = "xmlhtp.jpg" height = "238" width = "183" 17 alt = "XML How to Program book cover" /> 18 <img src = "jhtp.jpg" height = "238" width = "183" 19 alt = "Java How to Program book cover" /> 20 </p> 21 </body> 22 </html>

32

33 Tables <TABLE>: Intended for display of tabular data
Widely used for formatting control <TR>: table row <TD>: table data (individual cell data) <TH>: Table Header cell in a table. usually bold.

34 Other table related tags
Complex model <THEAD>, <TFOOT>, <TBODY> <COLGROUP>, <COL> <CAPTION> table caption.

35 Frame Example (Cont’d)

36 Framesets and Frames display more than one Web page/HTML document in the same browser window. The browser window is divided into multiple regions, or frames Each frame displays a unique web page Each frame is independent of the others

37 Frame Example <HTML> <HEAD> <title> The first frames page</title> </HEAD> <FRAMESET rows =20%,60%,20%> <FRAME NAME = “myTopFrame" SRC="top.html"> <FRAME NAME = “myMiddleFrame" SRC="middle.html"> <FRAME NAME = “myBottomFrame" SRC="bottom.html"> </FRAMESET> </HTML>

38 Frames (cont.) FRAMESET elements define a collection of frames
A 2x2 grid. <FRAMESET rows="80%,20%" cols="20%,80%" > Three columns: the second has a fixed width of 250 pixels (useful, for example, to hold an image with a known size). The first receives 25% of the remaining space and the third 75% of the remaining space. <FRAMESET cols="1*,250,3*"> ...the rest of the definition... </FRAMESET> FRAME elements specify the source of each frame’s content in left-to-right, top-to-bottom order

39 More complex frames

40 Linking in frames <a href="foo.html" target="myframe">
Each frame may contain hyperlinks Each hyperlink can be targeted to different frame or a new window <a href="foo.html" target="myframe"> _blank opens a new, unnamed window _self opens the link in the current frame (default) _top opens the link in the full, unframed browser window (throws you out of the frameset) _parent opens the link in the immediate frameset parent (calling frame)

41 Can you design Google page?

42 ...HTML Forms <form>: Just another kind of HTML tag
HTML forms are used to create (rather primitive) GUIs on the Web pages Purpose: to ask the user for information to sent back to the server A form is an area that can contain the form elements Example <form parameters> ...form elements... </form>

43 HTML Forms Form elements: buttons, checkboxes, text fields, radio buttons, drop-down menus. A form usually contains a Submit button to send the information filled in the form elements to the server

44 The <form> tag… The <form arguments> ... </form> tag encloses form elements (and probably other HTML tags as well) The arguments of form tell what to do with the user input action="url" (required) Specifies where to send the data when the Submit button is clicked

45 ...The <form> tag method="get" (default) method="post"
Form data is sent as a URL with ?form_data info appended to the end method="post" Form data is sent in the body of the URL request

46 The <form> tag target="target"
where to open the page sent as a result of the request target= _blank open in a new window target= _top use the same window

47 Understanding data encoding
name/value pairs reserved set of characters for separators + for space & for separating pairs hexadecimal encoding first=Ali&last=Alavi&simple=Submit+Name

48 Transporting data: GET method
Simple, default method Limit of 1024 chars for the URL Only a limited information can be transmitted in this way. Appends encoded data to the URL Searching IT Engineeing in google: Advantage: you can bookmark the form

49 Transporting data: POST method
The data is sent in the body of the http request. Thus it can be as long as you want.

50 The <input> tag Most, but not all of the form elements
with a type="..." argument to tell which kind of element it is. type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image Other common input tag arguments include: name: the name of the element value: the "value" of the element

51 Text, Textarea, password
A text field: <input type="text" name="textfield" value="with an initial value" > A multi-line text field <textarea name="textarea" cols="24" rows="2" >Hello</textarea> A password field: <input type="password" name="textfield3" value="secret" >

52 Buttons A submit button: <input type="submit" name=“mysubmit" value="Submit" > A reset button: <input type="reset" name=“myreset" value="Reset" > A plain button: <input type="button" name=“mypushmebutton" value="Push Me" >

53 Checkboxes A checkbox: <input type="checkbox" name="checkbox" value=“val1" checked> type: "checkbox" name: used to refer this form element value: value to be returned when the element is checked Note that there is no text associated with the checkbox — you have to supply text in the surrounding HTML

54 Radio buttons Radio buttons:
<br> <input type="radio" name="radiobutton" value="myValue1"> male<br> <input type="radio" name="radiobutton" value="myValue2" checked>female<br> grouping If two or more radio buttons have the same name, the user can only select one of them at the same time As with checkboxes, radio buttons do not contain any text

55 Drop-down menu or list A menu or list: <select name="select"> <option value="FF0000"> red </option> <option value="008000"> green</option> <option value="0000FF"> blue </option> </select> Additional arguments: size: the number of items visible in the list (default is "1") multiple: if set to "true", any number of items may be selected (default is "false")

56 Hidden fields including hidden fields A hidden field:
<input type="hidden" name="hiddenField" value="yeyeyeyeye"> <-- right there, don’t you see it? What reason is this for? All input fields are sent back to the server, including hidden fields This is a way to include information that the user doesn’t need to see

57 A complete example!? <html> <head> <title> Get Identity </title> <meta http-equiv="Content-Type" content="text/html; charset=iso " > </head> <body> <p><b> Who are you? </b></p> <form method="post" action=" " > <p> Name: <input type="text" name="textfield" > </p> <p> Gender: <input type="radio" name="gender" value="m" >Male <input type="radio" name="gender" value="f" >Female</p> </form> </body> </html>

58 An form! <html xmlns=" > <head> <title>Feedback Form</title> </head> <body bgcolor="white"> <h1>Feedback Form</h1> <form method="get" enctype="text/plain"> Name:<input type="text" name="name" size="30" /><br /> Please rate my site from 1 to 10 (1 = bad and 10 = good): <br /> <select name="rating"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option selected>10</option> </select><br /> How would you suggest I improve it?<br /> <textarea name="improve" rows="5" cols="30"></textarea> <br /> <input type="submit" value="Send feedback!" /> <input type="reset" /> </form> </body> </html>

59 META Tag Used in HEAD: This meta element defines a description of your page: <meta name="description" content="Free Web tutorials on HTML"> This meta element defines keywords for your page: <meta name="keywords" content="HTML,XML,JavaScript"> The following meta, automatically refreshes the page to the most recent version, or redirect to another page after a preset number of seconds: <meta http-equiv="refresh" content="5; url=newurl.html"> Other <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb :21:57 GMT"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <META HTTP-EQUIV="Content-Language" CONTENT="en-GB"> <META HTTP-EQUIV="Content-Language" CONTENT="fa"> <META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;expires=Friday, 31-Dec :59:59 GMT; path=/">

Download ppt "IT Engineering I Instructor: Behrang Assemi"

Similar presentations

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.

24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
16-Jul-15 HTML. 2 What is HTML? HTML stands for Hypertext Markup Language An HTML file is a text file containing markup tags The markup tags tell the.

16-Jul-15 HTML. 2 What is HTML? HTML stands for Hypertext Markup Language An HTML file is a text file containing markup tags The markup tags tell the.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.

CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
 2008 Pearson Education, Inc. All rights reserved. 1 4 4 Introduction to XHTML.

 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.

HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.
1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.

1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters.
HTML HTML stands for Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.

HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
HTML (HyperText Markup Language)

HTML (HyperText Markup Language)
1 XHTML Forms A form is the mechanism to –Collect information from a browser user –Transmit collected information from a browser to a server HTML/XHTML.

1 XHTML Forms A form is the mechanism to –Collect information from a browser user –Transmit collected information from a browser to a server HTML/XHTML.
Dr. Nuha El-KhaliliInternet Programming (102 340) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C

Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
Web Development University of Khartoum. Web Development Web Programming Web Design University of Khartoum.

Web Development University of Khartoum. Web Development Web Programming Web Design University of Khartoum.
Understanding HTML Code

Understanding HTML Code
 2008 Pearson Education, Inc. All rights reserved. 1 4 4 Introduction to XHTML Pt. 2.

 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML Pt. 2.
 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.

 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.

Similar presentations

Ads by Google