HTML. IT Engineering I Instructor: Ali B. Hashemi
|
|
- Shauna Melton
- 5 years ago
- Views:
Transcription
1 HTML IT Engineering I Instructor: Ali B. Hashemi 1 1
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 2 2
3 What is Markup? 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 3 3
4 HTML Markup (Tags) Simple start tag: <TITLE> End tag: </TITLE> Start tag with attributes: <body bgcolor=white> <body bgcolor="white" > 4 4
5 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 6 5
6 Practicing HTML! If you make a mistake in HTML 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 7 6
7 HTML Structure Minimal legal HTML document: <html> <head> <title> Test Document</title> </head> <body> <! This is a comment Content goes here --> </body> </html> 8 7
8 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 9 8
9 First HTML Example <!-- 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> 10 9
10 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> 11 10
11 Headers/Headings (example) <!-- 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> 12 11
12 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> 13 12
13 <!-- Fig. 4.5: links.html --> 6 <!-- Introduction to 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 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 = "
14 15 14
15 <!-- 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 = "mailto:deitel@deitel.com"> 18 deitel@deitel.com 19 </a> 20. Click the address and your browser will 21 open an message and address it to me. 22 </p> 23 </body> 24 </html> 16 15
16 17 16
17 Lists Lists Simple lists all use "list items" <LI> (end optional) Unordered lists <UL></UL> Ordered lists <OL></OL> Description lists Description list <Dl> Description text <DT> Description data <DD> Lists of all types may be nested -- Don t forget the end tags! 18 17
18 <!-- 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 = "
19 26 27 <li><a href = " <li><a href = " 30 </ul> 31 </body> 32 </html> 20 19
20 <!-- 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:
21 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> 22 21
22 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> 23 22
23 Ordered+Unordered lists 24 23
24 Block Structure Paragraph: <p> (end optional) <BR> forced line break <HR> horizontal rule <PRE> preformatted text Preserves spaces and line breaks 25 24
25 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> This is some text! This is some text! <font face="arial" color="red"> This is some text! </font> Emphasis <EM>, <STRONG>, <CODE>, etc. Subscripts <SUB> and superscripts <SUP> This is some text! 26 25
26 Images Images <IMG> SRC attribute: URL of image ALT attribute: alternative text Example: <IMG SRC= "martian.gif" WIDTH=100 HEIGHT=100 ALT="Martian" > 27 26
27 <!-- 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> 28 27
28 29 28
29 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
30 Frame Example (Cont d) 32 30
31 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 33 31
32 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> 34 32
33 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 35 33
34 More complex frames 36 34
35 Linking in frames Each frame may contain hyperlinks Each hyperlink can be targeted to different frame or a new window <a href="foo.html" target="myframe 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) 37 35
36 Can you design Google page? 38 36
37 HTML Forms <form> : just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Purpose: to ask the user for information to sent back to the server A form is an area that can contain form elements Example <form parameters>...form elements... </form> 39 37
38 HTML Forms Form elements: buttons, checkboxes, text fields, radio buttons, drop-down down menus. A form usually contains a Submit button Submit button to send the information in the form elements to the server 40 38
39 The <form> tag (1) The <form arguments>... </form> tag encloses form elements (and probably other HTML as well) The arguments to form tell what to do with the user input action="url url" (required) Specifies where to send the data when the Submit button is clicked 41 39
40 The <form> tag (2) method="get get" (default) Form data is sent as a URL with?form_data info appended to the end Limitation? method="post post" Form data is sent in the body of the URL request 42 40
41 The <form> tag (3) target="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 43 41
42 Understanding data encoding name/value pairs reserved set of characters for separators + for space & for separating pairs hexadecimal encoding first=ali&last=hashemi&simple=submit+name 44 42
43 Transporting data: GET method GET 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 URI Search IT Engineeing in google: Advantage: you can bookmark the form 45 43
44 Transporting data: POST method POST The data is sent in the body of the http request. Thus it can be as long as you want
45 The <input> tag Most, but not all form elements <input >, 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 47 45
46 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" > 48 46
47 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" > 49 47
48 Checkboxes A checkbox: <input type="checkbox" name="checkbox" value= val1" checked> type: "checkbox" name: used to reference this form element value: value to be returned when element is checked Note that there is no text associated with the checkbox you have to supply text in the surrounding HTML 50 48
49 Radio buttons Radio buttons: <br> <input type="radio" name="radiobutton" value="myvalue1" > male<br> <input type="radio" name="radiobutton" value="myvalue2" checked > female grouping If two or more radio buttons have the same name, the user can only select one of them at a time As with checkboxes, radio buttons do not contain any text 51 49
50 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: 52 size: the number of items visible in the list (d f lt i "1") red green red green blue 50
51 Hidden fields A hidden field: <input type="hidden" name="hiddenfield" value="yeyeyeyeye" > < -- right there, don t you see it? What good is this? 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 53 51
52 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> 54 52
53 A form! <html> <head> <title>feedback Form</title> </head> <body bgcolor="#ffffff"> <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"><br /> <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> 55 53
54 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"> Automatically refresh a page to the most current version, or change to another page entirely after a set 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=/"> 56 54
HTML HTML. What is HTML? What is Markup? HTML Markup (Tags) Hypertext Markup Language
HTML IT Engineering I Instructor: Ali B. Hashemi 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
More informationChapter 4 - Introduction to XHTML: Part 1
Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example 4.4 W3C XHTML Validation Service 4.5 Headers 4.6 Linking 4.7 Images 4.8 Special Characters and
More informationChapter 4 - Introduction to XHTML: Part 1
Chapter - Introduction to XHTML: Part 1.1 Introduction.2 Elements and Attributes.3 Editing XHTML. Common Elements.5 W3C XHTML Validation Service.6 Headers. Linking.8 Images.9 Special Characters and More
More informationCISC 1400 Discrete Structures
CISC 1400 Discrete Structures Building a Website 1 The Internet A "network of networks" that consists of millions of smaller domestic, academic, business, and government networks. Worldwide, publicly accessible
More informationIslamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.
Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM 5049 Advanced Internet Technology Lab Lab # 1 Eng. Haneen El-masry February, 2015 Objective To be familiar with
More informationIT350 Web & Internet Programming. Fall 2012
IT350 Web & Internet Programming Fall 2012 Asst. Prof. Adina Crăiniceanu http://www.usna.edu/users/cs/adina/teaching/it350/fall2012/ 2 Outline Class Survey / Role Call What is: - the web/internet? - web
More informationInternet and New Media (INM)
Internet and New Media (INM) Chapter 02 XHTML Victor M. Garcia-Barrios IICM @ TUGRAZ 1 2 Agenda Introduction Editing XHTML First XHTML Example W3C XHTML Validation Service Headings Linking Images Special
More informationIntroduction to XHTML Pearson Education, Inc. All rights reserved.
1 4 Introduction to XHTML 2 To read between the lines was easier than to follow the text. Henry James High thoughts must have high language. Aristophanes Yea, from the table of my memory I ll wipe away
More informationA Brief Introduction to HTML
A P P E N D I X HTML SuMMAry J A Brief Introduction to HTML A web page is written in a language called HTML (Hypertext Markup Language). Like Java code, HTML code is made up of text that follows certain
More informationCSC Web Technologies, Spring HTML Review
CSC 342 - Web Technologies, Spring 2017 HTML Review HTML elements content : is an opening tag : is a closing tag element: is the name of the element attribute:
More informationCreating Web Pages Using HTML
Creating Web Pages Using HTML HTML Commands Commands are called tags Each tag is surrounded by Some tags need ending tags containing / Tags are not case sensitive, but for future compatibility, use
More informationA HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension
HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called
More information11. HTML5 and Future Web Application
11. HTML5 and Future Web Application 1. Where to learn? http://www.w3schools.com/html/html5_intro.asp 2. Where to start: http://www.w3schools.com/html/html_intro.asp 3. easy to start with an example code
More informationintroduction to XHTML
introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers
More informationChapter 4. Introduction to XHTML: Part 1
Chapter 4. Introduction to XHTML: Part 1 XHTML is a markup language for identifying the elements of a page so a browser can render that page on a computer screen. Document presentation is generally separated
More informationCOMPUTER APPLICATIONS IN BUSINESS FYBMS SEM II
CHAPTER 1: HTML 1. What is HTML? Define its structure. a. HTML [Hypertext Markup Language] is the main markup language for creating web pages and other information that can be displayed in a web browser.
More informationHtml basics Course Outline
Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and
More information1.264 Lecture 12. HTML Introduction to FrontPage
1.264 Lecture 12 HTML Introduction to FrontPage HTML Subset of Structured Generalized Markup Language (SGML), a document description language SGML is ISO standard Current version of HTML is version 4.01
More informationSummary 4/5. (contains info about the html)
Summary Tag Info Version Attributes Comment 4/5
More informationHTML BEGINNING TAGS. HTML Structure <html> <head> <title> </title> </head> <body> Web page content </body> </html>
HTML BEGINNING TAGS HTML Structure Web page content Structure tags: Tags used to give structure to the document.
More informationBuilding Web Based Application using HTML
Introduction to Hypertext Building Web Based Application using HTML HTML: Hypertext Markup Language Hypertext links within and among Web documents connect one document to another Origins of HTML HTML is
More informationNetworking and Internet
Today s Topic Lecture 13 Web Fundamentals Networking and Internet LAN Web pages Web resources Web client Web Server HTTP Protocol HTML & HTML Forms 1 2 LAN (Local Area Network) Networking and Internet
More informationCSC 121 Computers and Scientific Thinking
CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationCHAPTER 2 MARKUP LANGUAGES: XHTML 1.0
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document
More informationProgrammazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
More informationrecall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)
HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its
More informationChapter 2: Introduction to HTML Part 1 HTML. Editing HTML. Editing HTML. HTML Concepts. Introduction to HTML: Part 1. CS 80: Internet Programming
Chapter 2: Introduction to HTML Part 1 CS 80: Internet Programming Instructor: Mark Edmonds HTML What does it stand for? Hypertext markup language What is a markup language? Not a traditional programming
More informationWeb Technologies - by G. Sreenivasulu Handout - 1 UNIT - I
INTRODUCTION: UNIT - I HTML stands for Hyper Text Markup Language.HTML is a language for describing web pages.html is a language for describing web pages.html instructions divide the text of a document
More informationHTML. Hypertext Markup Language. Code used to create web pages
Chapter 4 Web 135 HTML Hypertext Markup Language Code used to create web pages HTML Tags Two angle brackets For example: calhoun High Tells web browser ho to display page contents Enter with
More informationModule 2-1-1: Markup Languages & HTML
WEB ENGINEERING G & DEVELOPMENT SWE 363 Spring Semester 2008-2009 (082) Module 2-1-1: Markup Languages & HTML Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals
More informationCOSC 2206 Internet Tools. Brief Survey of HTML and XHTML Document Structure Formatting
COSC 2206 Internet Tools Brief Survey of HTML and XHTML Document Structure Formatting 1 W3C HTML Home page W3C is the World Wide Web Consortium and their home page has lots of information, links, and a
More informationCSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0
CSI 3140 WWW Structures, Techniques and Standards Markup Languages: XHTML 1.0 HTML Hello World! Document Type Declaration Document Instance Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson
More informationCSC Web Programming. Introduction to HTML
CSC 242 - Web Programming Introduction to HTML Semantic Markup The purpose of HTML is to add meaning and structure to the content HTML is not intended for presentation, that is the job of CSS When marking
More informationA Balanced Introduction to Computer Science, 3/E
A Balanced Introduction to Computer Science, 3/E David Reed, Creighton University 2011 Pearson Prentice Hall ISBN 978-0-13-216675-1 Chapter 2 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is
More informationCourse Syllabus COURSE NAME
Course Syllabus COURSE NAME Internet Technology COURSE CODE COMP230 CREDIT 3 CONTACT HOURS 4 (2 + 2) PREREQUISITE COMP151 : Introduction to Algorithms and Programming LEARNING OUTCOMES SYNOPSIS CONTENTS
More informationChapter 1 FORMS. SYS-ED/ Computer Education Techniques, Inc.
Chapter 1 FORMS SYS-ED/ Computer Education Techniques, Inc. Objectives You will learn: How to use forms and the related form types. Controls for interacting with forms. Menus and presenting users with
More informationCS 350 COMPUTER/HUMAN INTERACTION. Lecture 6
CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r
More information96 Intermediate HTML 4 Chapter 4
iw3htp_04.fm Page 96 Thursday, April 13, 2000 12:26 PM 96 Intermediate HTML 4 Chapter 4 4 Intermediate HTML 4 1 2 3 4 5 6 7 Internet
More informationWeb Development & Design Foundations with XHTML. Chapter 2 Key Concepts
Web Development & Design Foundations with XHTML Chapter 2 Key Concepts Learning Outcomes In this chapter, you will learn about: XHTML syntax, tags, and document type definitions The anatomy of a web page
More informationAnnouncements. Paper due this Wednesday
Announcements Paper due this Wednesday 1 Client and Server Client and server are two terms frequently used Client/Server Model Client/Server model when talking about software Client/Server model when talking
More informationHTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS
MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version
More informationHTML Tables and Forms. Outline. Review. Review. Example Demo/ Walkthrough. CS 418/518 Web Programming Spring Tables to Display Data"
CS 418/518 Web Programming Spring 2014 HTML Tables and Forms Dr. Michele Weigle http://www.cs.odu.edu/~mweigle/cs418-s14/ Outline! Assigned Reading! Chapter 4 "Using Tables to Display Data"! Chapter 5
More informationHTML Tags Chart. To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page.
HTML Tags Chart To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page. Tag Name Code Example Browser View
More informationUnit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4
Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered
More informationTag Name Code Example Browser View. <!--This can be viewed in the HTML part of a document--> <a href=" Visit Our Site</a>
Tag Name Code Example Browser View Visit Our Site Nothing will show Visit Our Site
More informationHTML Tags <A></A> <A HREF="http://www.cnn.com"> CNN </A> HREF
HTML Tags Tag Either HREF or NAME is mandatory Definition and Attributes The A tag is used for links and anchors. The tags go on either side of the link like this: the link
More informationSpring 2014 Interim. HTML forms
HTML forms Forms are used very often when the user needs to provide information to the web server: Entering keywords in a search box Placing an order Subscribing to a mailing list Posting a comment Filling
More informationWeb Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.
What is HTML? Web Design 101 HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language à A markup language is a set of markup tags The tags describe
More informationDesire2Learn: HTML Basics
Desire2Learn: HTML Basics Page 1 Table of Contents HTML Basics... 2 What is HTML?...2 HTML Tags...2 HTML Page Structure...2 Required Tags...3 Useful Tags...3 Block Quote - ...
More informationHTML Element A pair of tags and the content these include are known as an element
HTML Tags HTML tags are used to mark-up HTML elements. HTML tags are surrounded by the two characters < and >. The surrounding characters are called angle brackets HTML tags are not case sensitive,
More informationIntroduction to XHTML: Part 2
L Introduction to XHTML: Part 2 Objectives To be able to create tables with rows and columns of data. To be able to control table formatting. To be able to create and use forms. To be able to create and
More informationBy Ryan Stevenson. Guidebook #2 HTML
By Ryan Stevenson Guidebook #2 HTML Table of Contents 1. HTML Terminology & Links 2. HTML Image Tags 3. HTML Lists 4. Text Styling 5. Inline & Block Elements 6. HTML Tables 7. HTML Forms HTML Terminology
More informationBasics of Web Design, 3 rd Edition Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What element is used to configure a new paragraph? a. new b. paragraph c. p d. div 2. What element is used to create the largest heading? a. h1 b. h9 c. head
More informationUNIT II Dynamic HTML and web designing
UNIT II Dynamic HTML and web designing HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language
More informationI-5 Internet Applications
I-5 Internet Applications After completion of this unit, you should be able to understand and code a webpage that includes pictures, sounds, color, a table, a cursor trail, hypertext, and hyperlinks. Assignments:
More informationHTML. HTML Evolution
Overview stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup
More informationD B M G. Introduction to databases. Web programming: the HTML language. Web programming. The HTML Politecnico di Torino 1
Web programming The HTML language The HTML language Basic concepts User interfaces in HTML Forms Tables Passing parameters stored in forms @2017 Politecnico di Torino 1 Basic concepts HTML: HyperText Markup
More informationHow the Internet Works
How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).
More information2.1 Origins and Evolution of HTML
2.1 Origins and Evolution of HTML - HTML was defined with SGML - Original intent of HTML: General layout of documents that could be displayed by a wide variety of computers - Recent versions: - HTML 4.0
More informationHTML: Fragments, Frames, and Forms. Overview
HTML: Fragments, Frames, and Forms Michael B. Spring Department of Information Science and Telecommunications University of Pittsburgh spring@ imap.pitt.edu http://www.sis. pitt.edu/~spring Overview Fragment
More informationSYBMM ADVANCED COMPUTERS QUESTION BANK 2013
CHAPTER 1: BASIC CONCEPTS OF WEB DESIGNING 1. What is the web? What are the three ways you can build a webpage? The World Wide Web (abbreviated as WWW or W3, commonly known as the web), is a system of
More informationc122jan2714.notebook January 27, 2014
Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the
More informationChapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?
LATIHAN BAB 1 Chapter 1 Self Test 1. What is a web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL: http://www.mcgrawhill.com/books/ webdesign/favorites.html ://
More informationWeb Designing HTML5 NOTES
Web Designing HTML5 NOTES HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages
More informationProgramming of web-based systems Introduction to HTML5
Programming of web-based systems Introduction to HTML5 Agenda 1. HTML5 as XML 2. Basic body elements 3. Text formatting and blocks 4. Tables 5. File paths 6. Head elements 7. Layout elements 8. Entities
More informationMarkup Language SGML: Standard Generalized Markup Language. HyperText Markup Language (HTML) extensible Markup Language (XML) TeX LaTeX
HTML 1 Markup Languages A Markup Language is a computer language in which data and instructions describing the structure and formatting of the data are embedded in the same file. The term derives from
More informationHTML What is HTML Hyper Text Markup Language is a computer based language used to create WebPages.
vinsri76@yahoo.com +965-69300304 HTML What is HTML Hyper Text Markup Language is a computer based language used to create WebPages. Name Two text Editor which are used to create HTML page. They are: Notepad
More informationHTML Tables and. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar
HTML Tables and Forms Chapter 5 2017 Pearson http://www.funwebdev.com - 2 nd Ed. HTML Tables A grid of cells A table in HTML is created using the element Tables can be used to display: Many types
More informationWeb Development and HTML. Shan-Hung Wu CS, NTHU
Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does Internet Work? Web Development HTML Block vs. Inline elements Lists Links and Attributes Tables Forms 2 Outline How does Internet Work? Web
More informationHTML Tags Chart. To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page.
HTML Tags Chart To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page. Tag Name Code Example Browser View
More informationCertified HTML5 Developer VS-1029
VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the
More information(Refer Slide Time: 01:41) (Refer Slide Time: 01:42)
Internet Technology Prof. Indranil Sengupta Department of Computer Science and Engineering Indian Institute of Technology, Kharagpur Lecture No #14 HTML -Part II We continue with our discussion on html.
More informationHTML. Asst. Prof. Dr. Kanda Runapongsa Saikaew Department of Computer Engineering Khon Kaen University
HTML Asst. Prof. Dr. Kanda Runapongsa Saikaew (krunapon@kku.ac.th) Department of Computer Engineering Khon Kaen University 1 What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file
More information1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5
Name Date Final Exam Prep Questions Worksheet #1 1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 2. Which of the following
More informationHTML OBJECTIVES WHAT IS HTML? BY FAITH BRENNER AN INTRODUCTION
HTML AN INTRODUCTION BY FAITH BRENNER 1 OBJECTIVES BY THE END OF THIS LESSON YOU WILL: UNDERSTAND HTML BASICS AND WHAT YOU CAN DO WITH IT BE ABLE TO USE BASIC HTML TAGS BE ABLE TO USE SOME BASIC FORMATTING
More informationCreating Web Pages. Getting Started
Creating Web Pages Getting Started Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking to other Files What Web Pages Are Web Pages combine
More informationHTML. LBSC 690: Jordan Boyd-Graber. October 1, LBSC 690: Jordan Boyd-Graber () HTML October 1, / 29
HTML LBSC 690: Jordan Boyd-Graber October 1, 2012 LBSC 690: Jordan Boyd-Graber () HTML October 1, 2012 1 / 29 Goals Review Assignment 1 Assignment 2 and Midterm Hands on HTML LBSC 690: Jordan Boyd-Graber
More informationA website is a way to present your content to the world, using HTML to present that content and make it look good
What is a website? A website is a way to present your content to the world, using HTML to present that content and make it look good HTML: What is it? HTML stands for Hyper Text Markup Language An HTML
More informationPart 1: HTML Language HyperText Make-up Language
Part 1: HTML Language HyperText Make-up Language 09/08/2010 1 CHAPTER I Introduction about Web Design 2 Internet and World Wide Web The Internet is the world s largest computer network The Internet is
More informationFundamentals: Client/Server
Announcements Class Web Site: http://www.cs.umd.edu/projects/passport/classes/summer2008/ You can find this link at the end of the main passport site http://www.cs.umd.edu/projects/passport/webpage/ E-mail
More informationWhat is a web site? Web editors Introduction to HTML (Hyper Text Markup Language)
What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language) What is a website? A website is a collection of web pages containing text and other information, such as images, sound
More informationCPET 499/ITC 250 Web Systems. Topics
CPET 499/ITC 250 Web Systems Lecture on HTML and XHTML, Web Browsers, and Web Servers References: * Fundamentals of Web Development, 2015 ed., by Randy Connolly and Richard Hoar, from Pearson *Chapter
More informationHTML Forms. By Jaroslav Mohapl
HTML Forms By Jaroslav Mohapl Abstract How to write an HTML form, create control buttons, a text input and a text area. How to input data from a list of items, a drop down list, and a list box. Simply
More informationIt is possible to create webpages without knowing anything about the HTML source behind the page.
What is HTML? HTML is the standard markup language for creating Web pages. HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in
More informationLearning Objectives. Review html Learn to write a basic webpage in html Understand what the basic building blocks of html are
HTML CSCI311 Learning Objectives Review html Learn to write a basic webpage in html Understand what the basic building blocks of html are HTML: Hypertext Markup Language HTML5 is new standard that replaces
More informationThe figure below shows the Dreamweaver Interface.
Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia
More informationWeb Programming. Based on Notes by D. Hollinger Also Java Network Programming and Distributed Computing, Chs.. 9,10 Also Online Java Tutorial, Sun.
Web Programming Based on Notes by D. Hollinger Also Java Network Programming and Distributed Computing, Chs.. 9,10 Also Online Java Tutorial, Sun. 1 World-Wide Wide Web (Tim Berners-Lee & Cailliau 92)
More informationWeb Publishing with HTML
Web Publishing with HTML MSc Induction Tutorials Athena Eftychiou PhD Student Department of Computing 1 Objectives Provide a foundation on Web Publishing by introducing basic notations and techniques like
More informationCertified HTML Designer VS-1027
VS-1027 Certification Code VS-1027 Certified HTML Designer Certified HTML Designer HTML Designer Certification allows organizations to easily develop website and other web based applications which are
More informationHTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors.
HTML HTML/XHTML HyperText Mark-up Language Basic language for WWW documents Format a web page s look, position graphics and multimedia elements Describe document structure and formatting Platform independent:
More informationINTRODUCTION TO HTML5! HTML5 Page Structure!
INTRODUCTION TO HTML5! HTML5 Page Structure! What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since
More informationCSE 3. Marking Up with HTML. Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware
CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware 1-1 4-1 Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology
More informationHTTP and HTML. We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms.
HTTP and HTML We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms. HTTP and HTML 28 January 2008 1 When the browser and the server
More information(X)HTML. Internet Engineering. Spring Bahador Bakhshi CE & IT Department, Amirkabir University of Technology
(X)HTML Internet Engineering Spring 2018 Bahador Bakhshi CE & IT Department, Amirkabir University of Technology Questions Q2) How is a web page organized? Q2.1) What language is used for web pages? Q2.2)
More informationChapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.
Chapter 2:- Introduction to XHTML Compiled By:- Assistant Professor, SVBIT. Outline Introduction to XHTML Move to XHTML Meta tags Character entities Frames and frame sets Inside Browser What is XHTML?
More informationThe Hypertext Markup Language (HTML) Part II. Hamid Zarrabi-Zadeh Web Programming Fall 2013
The Hypertext Markup Language (HTML) Part II Hamid Zarrabi-Zadeh Web Programming Fall 2013 2 Outline HTML Structures Tables Forms New HTML5 Elements Summary HTML Tables 4 Tables Tables are created with
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationWeb Publishing Basics I
Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic
More information