1 / 61

Mastering HTML Basics: Essential Markup Tags and Elements

Learn the fundamentals of HTML, including tags, elements, structure, and linking in this comprehensive guide. Practice HTML with practical examples and understand the importance of markup in web development.

mitch
Télécharger la présentation

Mastering HTML Basics: Essential Markup Tags and Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML IT Engineering I Instructor: RezvanShiravi Rezvan_shiravi@yahoo.com

  2. What is HTML? • HypertextMarkup 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? • 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 • HTMLAn <emph>important</emph> concept • LaTeX An {\em important} concept

  4. HTML Markup(Tags) • tag ::= < tagnameattribute-pair* > <bodybgcolor="white"> • <tagname>: opening (start) tag : <TITLE> • </tagname>: closing (end) tag: </TITLE> • <tagname/>: self-closing tag: <imgattributes /> • Core attributes can be used for most of elements • id: A unique identifier to element starting with "A-Z" • class: Assign a class to the element, multiple classes are allowed • title: Assign a title, the behavior depends on element

  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. 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. HTML Structure • Minimal legal HTML document: <html> <head> <title> Test Document</title> </head> <body> <!– This is a comment Content goes here --> </body> </html>

  8. HTML has two parts • HTML document start-end: <html> </html> • Page header: <head> </head>:Information about the document • TITLE: appears in title bar • META: description of your page • Page body: <body> </body>:visible content of document • Comments: Starts by <!--, end by -->

  9. 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> 12 13 <body> 14 <p>Welcome to XHTML!</p> 15 </body> 16 </html>

  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. Headers/Headings (example) 5 <!-- Fig. 4.4: header.html --> 6 8 <html > 9 <head> 10 <title>Internet and WWW How to Program - Headers</title> 11 </head> 12 13 <body> 14 15 <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> 21 22 </body> 23 </html>

  12. Linking • Anchor <a>: basis of hypertext links • defines a section of linkable material • <HREF>: URL of link target Example <a href="http://www.somewhere.com/#aTarget">A Link to Somewhere Else</a>

  13. 15 <h1>Here are my favorite sites</h1> 16 17 <p><strong>Click a name to go to that page.</strong></p> 18 19 <!-- Create four text hyperlinks --> 20 <p><a href = "http://www.deitel.com">Deitel</a></p> 21 22 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> 23 24 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>

  14. 5 <!-- Fig. 4.6: contact.html --> 6 <!-- Adding email hyperlinks --> 7 8 <html> 9 <head> 10 <title>Internet and WWW How to Program - Contact Page</title> 11 </head> 12 13 <body> 14 15 <p> 16 My email 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 e-mail message and address it to me. 22 </p> 23 </body> 24 </html>

  15. 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!

  16. 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> 12 13 <body> 14 15 <h1>Here are my favorite sites</h1> 16 17 <p><strong>Click on a name to go to that page.</strong></p> 18 19 <!-- create an unordered list --> 20 <ul> 21 22 <!-- add four list items --> 23 <li><a href = "http://www.deitel.com">Deitel</a></li> 24 25 <li><a href = "http://www.w3.org">W3C</a></li> 26 27 <li><a href = "http://www.yahoo.com">Yahoo!</a></li> 28 29 <li><a href = "http://www.cnn.com">CNN</a></li> 30 </ul> 31 </body> 32 </html>

  17. 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> 12 13 <body> 14 15 <h1>The Best Features of the Internet</h1> 16 17 <!-- 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

  18. 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 31 32 <!-- nested ordered list --> 33 <ol> 34 <li>For business</li> 35 <li>For pleasure</li> 36 </ol> 37 </li> 38 39 <li>Around the clock news</li> 40 <li>Search engines</li> 41 <li>Shopping</li> 42 <li> 43 Programming 44 45 <!-- another nested ordered list --> 46 <ol> 47 <li>XML</li> 48 <li>Java</li>

  19. 49 <li>XHTML</li> 50 <li>Scripts</li> 51 <li>New languages</li> 52 </ol> 53 54 </li> 55 56 </ul> <!-- ends the nested list of line 27 --> 57 </li> 58 59 <li>Links</li> 60 <li>Keeping in touch with old friends</li> 61 <li>It is the technology of the future!</li> 62 63 </ul> <!-- ends the unordered list of line 18 --> 64 65 </body> 66 </html>

  20. Block Structure • Paragraph: <p> (end optional) • <BR> forced line break • <HR> horizontal rule • separate content in an HTML page • <PRE> preformatted text • Preserves spaces and line breaks • To add space: &nbsp;

  21. 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! This is some text! This is some text!

  22. Normal <br /> <b> Bold </b> <br /> <i> Italic </i> <br /> <u> Underline </u> <br /> <s> Strikethrough </s> <br /> <tt> Teletype </tt> <br /> Normal<sup> Superscript </sup> <br /> Normal<sub> Subscript </sub> <br /> <big> Big </big> <br /> <small> Small </small> <br /> <hr /> <b> <i> <u> Test1 </u> </i> </b> <br /> <big> <big> <big> <big> <tt> Test2 </tt> </big> </big>

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

  24. 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> 12 13 <body> 14 15 <p> 16 <imgsrc = "xmlhtp.jpg" height = "238" width = "183" 17 alt = "XML How to Program book cover" /> 18 <imgsrc = "jhtp.jpg" height = "238" width = "183" 19 alt = "Java How to Program book cover" /> 20 </p> 21 </body> 22 </html>

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

  26. Frame Example (Cont’d)

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

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

  29. 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. <FRAMESETcols="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

  30. More complex frames

  31. 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"> • _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)

  32. Can you design Google page?

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

  34. HTML Forms • Form elements: buttons,checkboxes,textfields,radiobuttons,drop-downmenus. • A form usually contains a Submit button to send the information filled in the form elements to the server

  35. 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 theSubmitbutton is clicked

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

  37. 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= _topuse the same window

  38. The <input> tag • Most, but not all of the 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

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

  40. Buttons • A submit button:<inputtype="submit" name=“mysubmit" value="Submit"> • A reset button:<inputtype="reset" name=“myreset" value="Reset"> • A plain button:<inputtype="button" name=“mypushmebutton" value="Push Me">

  41. Checkboxes • A checkbox: <inputtype="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 • To draw border around a group of components • <fieldset> </fieldset> • To assign name to the group • <legend> </legend> • Note that there is no text associated with the checkbox — you have to supply text in the surrounding HTML

More Related