Lectuer html1
Download as PPTX, PDF3 likes1,108 views
HTML is a markup language used to define the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, lists, links etc. Basic HTML tags include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, <ol> for ordered lists, and <a> for links. Links are defined using the <a> tag along with an href attribute specifying the URL. HTML also supports basic text formatting tags like <b> for bold, <i> for italic, and <br> for line breaks. Comments can be added in HTML using <!-- and --> tags.
Lectuer html1
- 1. , T. Nawal Abdullah Alragwi
- 3. HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content. What is HTML?
- 4. 4 HTML History HTML 2.0 HTML 3.2 HTML 4.0 – All formatting is separated into a style sheet. HTML 4.01 – Makes the future upgrade from HTML to XHTML in a simple process. XHTML – sometimes referred to as HTML 5 – The future of HTML standard – Almost identical to HTML 4.01
- 5. HTML Editors HTML can be edited by using a professional HTML editor like: – Adobe Dreamweaver – Microsoft Expression Web – CoffeeCup HTML Editor However, for learning HTML we recommend a text editor like Notepad (PC). We believe using a simple text editor is a good way to learn HTML.
- 6. Follow the 4 steps below to create your first web page with Notepad. Step 1: Open Notepad To open Notepad in Windows 7 or earlier: Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad. Step 2: Write Some HTML Write or copy some HTML into Notepad. Step 3: Save the HTML Page Select File > Save as in the Notepad menu. Name the file "index.htm" or any other name ending with htm. UTF-8 is the preferred encoding for HTML files.6 HTML Editors
- 7. 7 HTML Elements HTML elements are written with a start tag, with an end tag, with the content in between: <tagname>content</tagname> The HTML element is everything from the start tag to the end tag: <p>My first HTML paragraph.</p> What are Element / Tags? End tag Element contentStart tag </h1>My First Heading<h1> </p>My first paragraph.<p> <br>
- 9. 9 8 <!DOCTYPE html> <html> <head> 9 <title>Welcome</title> 10 </head> 11 12 <body> 13 <p>Welcome to HTML!</p> 14 </body> 15 </html> Creates a head element Creates a title element, which contains the text Welcome Creates a p element within the body, which displays welcome text HTML Example
- 10. Example Explained 10 The DOCTYPE declaration defines the document type to be HTML The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <p> and </p> describes a paragraph
- 11. HTML Page Structure Main HTML Elements / Tags 11
- 12. 12 HTML Attributes <p align=“right”> welcome </p> Element Attribute Name Attribute Value HTML elements can have attributes. Attributes provide additional information about an element. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value" content
- 13. 13 Headings Heading Types – <H1 ...> ... </H1> – <H2 ...> ... </H2> – <H3 ...> ... </H3> – <H4 ...> ... </H4> – <H5 ...> ... </H5> – <H6 ...> ... </H6> Attributes: ALIGN – Values: LEFT (default), RIGHT, CENTER Nesting tags – Headings and other block-level elements can contain text-level elements, but not vice versa
- 14. 14 Headings, Example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1>Level-1 (H1)</H1> <H2 ALIGN="CENTER">Level-2 (H2)</H2> <H3><U>Level-3 (H3)</U></H3> <H4 ALIGN="RIGHT">Level-4 (H4)</H4> <H5>Level-5 (H5)</H5> <H6>Level-6 (H6)</H6> </BODY> </HTML>
- 16. 16 P – The Basic Paragraph Attributes: ALIGN – LEFT (default), RIGHT, CENTER. Same as headings. – Whitespace ignored (use <BR> for line break) – End Tag is Optional: <BODY> <P> Paragraph 1 </P> <P> Paragraph 2 </P> <P> Paragraph 3 </P> </BODY> Fully-Specified <BODY> Paragraph 1 <P> Paragraph 2 <P> Paragraph 3 </BODY> Equivalent with Implied Tags
- 17. 17 <html> <head> <title>Text Layout</title> </head> <body> <p> This is a paragraph of text <br/> made up of two lines. </p> <p> This is another paragraph with a GAP between some of the words. </p> <p> This paragraph is <br/> indented on the first line <br/> but not on subsequent lines. </p> </body> </html> Paragraph, Example
- 19. You can add comments to your HTML source by using the following syntax: Example <!-- Write your comments here --> Note: There is an exclamation point (!) in the opening tag, but not in the closing tag. Comments are not displayed by the browser, but they can help document your HTML. With comments you can place notifications and reminders in your HTML: HTML Comment Tags
- 20. 20 <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> Comment, Example
- 21. 21 HTML Text Formatting Elements Tag Description <u> Under line <b> Bold text <big> Big text <em> Emphasized text <i> Italic text <tt>… </tt> specify typewriter-like (fixed-width) font <small> Small text <strong> Strong text <sub> Subscripted text <sup> Superscripted text
- 22. 22 Tag Description <br/> Break-enter <hr/> Horizontal line <Pre> Defines preformatted text <abbr> abbreviation <strike> Defines deleted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text <code> Defines programming code <kbd> Defines keyboard input <samp> Defines computer output <var> Defines a mathematical variable
- 23. 23 The most common entities Display Description Name Non-breaking space < Less than < > Greater than > & Ampersand & “ Quotation mark " ‘ Apostrophe '
- 24. HTML Computer Code Elements Normally, HTML uses variable letter size, and variable letter spacing. This is not wanted when displaying examples of computer code. The <kbd>, <samp>, and <code> elements all support fixed letter size and spacing. 24
- 25. 25 HTML Text Formatting Elements Example ... <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR> ...
- 26. 26 HTML Text Formatting Elements, Result
- 27. 27 HTML Computer Code Elements Example ... <H1>Logical Character Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM><BR> <FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM> ...
- 28. 28 HTML Computer Code Elements, Result
- 29. 29 6 7 <html > 8 <head> 9 <title>Contact Page</title> 10 </head> 11 12 <body> 13 <p> 14 Click 15 <a href = "mailto:[email protected]">here</a> 16 to open an email message addressed to 17 [email protected]. 18 </p> 19 20 <hr /> <!-- inserts a horizontal rule --> 21 22 <!-- special characters are entered --> 23 <!-- using the form &code; --> 24 <p>All information on this site is <strong>© 25 Deitel & Associates, Inc. 2007.</strong></p> 26 Inserts a horizontal rule, with a line break before and after Inserts the special characters © and & Physical Character Styles, Example
- 30. 30 27 <!-- to strike through text use <del> tags --> 28 <!-- to subscript text use <sub> tags --> 29 <!-- to superscript text use <sup> tags --> 30 <!-- these tags are nested inside other tags --> 31 <p><del>You may download 3.14 x 10<sup>2</sup> 32 characters worth of information from this site.</del> 33 Only <sub>one</sub> download per hour is permitted.</p> 34 <p><em>Note: < ¼ of the information 35 presented here is updated daily.</em></p> 36 </body> 37 </html> Makes the 2 superscript Makes the 1 subscript Creates a strikethrough effect Emphasizes text Inserts the special symbols < and ¼
- 31. 31 HTML Lists Unordred Lists Ordered Lists Definition Lists
- 32. 32 OL: Ordered (Numbered) Lists OL Element – <OL> <LI>… <LI>… ... </OL> – Attributes: TYPE, START, COMPACT List entries: LI – <LI ...> ... </LI> (End Tag Optional) – Attributes: (When inside OL) VALUE, TYPE A sample list: <OL> <LI>List Item One <LI>List Item Two <LI>List Item Three </OL>
- 33. INE2720 – Web Application Software Development 33 Nested Ordered Lists <OL TYPE="I"> <LI>Headings <LI>Basic Text Sections <LI>Lists <OL TYPE="A"> <LI>Ordered <OL TYPE="1"> <LI>The OL tag <OL TYPE="a"> <LI>TYPE <LI>START <LI>COMPACT </OL> <LI>The LI tag </OL> <LI>Unordered <OL TYPE="1"> <LI>The UL tag <LI>The LI tag </OL> <LI>Definition <OL TYPE="1"> <LI>The DL tag <LI>The DT tag <LI>The DD tag </OL> </OL> <LI>Miscellaneous </OL>
- 34. 34 UL: Unordered (Bulleted) Lists UL Element – <UL> <LI>… <LI>… ... </UL> Attributes: TYPE, COMPACT – TYPE is DISC, CIRCLE, or SQUARE List entries: LI (TYPE) – TYPE is DISC, CIRCLE, or SQUARE A sample list: <UL> <LI>List Item One <LI>List Item Two <LI>List Item Three </UL>
- 35. INE2720 – Web Application Software Development 35 UL: Custom Bullets <UL TYPE="DISC"> <LI>The UL tag <UL TYPE="CIRCLE"> <LI>TYPE <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>COMPACT </UL> <LI>The LI tag <UL TYPE="CIRCLE"> <LI>TYPE <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>VALUE </UL> </UL>
- 36. 36 HTML Links <a> to create a link to another document. The target attribute – <a href=“…”, target=“_blank”>xxx</a> – Open the document in a new browser window. The name attribute – <a name=“abc”> – <a href=“#abc”>Useful text</a>
- 37. 1 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 <p><a href = "http://www.deitel.com">Deitel</a></p> 20 21 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> 22 23 <p><a href = "http://www.yahoo.com">Yahoo!</a></p> 24 25 <p><a href = "http://www.usatoday.com">USA Today</a></p> 26 27 </body> 28 </html> Text between strong tags will appear bold. Elements placed between paragraph tags will be set apart from other elements on the Linking is accomplished in XHTML with the anchor (a) element. The anchor links to the page that’s value is given by the href attribute. The text between the a tags is the anchor for the link.
- 38. Hypertext Links Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.
- 39. 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Internet and WWW How to Program - Contact Page 11 </title> 12 </head> 13 14 <body> 15 16 <p>My email address is 17 <a href = "mailto:[email protected]"> [email protected] 18 </a>. Click the address and your browser will open an 19 email message and address it to me.</p> 20 21 </body> 22 </html> To create an email link include “mailto:” before the email address in the href attribute. When a user clicks on an email link, an email message addressed to the value of the link will open up.