1 / 24

HTML

Information Resources and Communication , WS 2013/201 4. HTML. Jiří Balej, Martin Podborský. 3. 10. 2013. What is HTML?. HTML (HyperText Markup Language) – the lingua franca for publishing hypertext documents on the WWW HTML is not a programming language HTML is a markup language

chen
Download Presentation

HTML

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. Information Resources and Communication, WS 2013/2014 HTML Jiří Balej, Martin Podborský 3. 10. 2013

  2. What is HTML? • HTML (HyperText Markup Language) – the lingua franca for publishing hypertext documents on the WWW • HTML is not a programming language • HTML is a markup language • Markup language is a set of markup tags

  3. Purpose of HTML • HTML can be processed by many tools, ex. Web browsers • HTML uses tags to structure text into headings, paragraphs, list, tables, hypertext links etc.

  4. What is a tag? • The purpose of tags is to describe page content • Tag consists of: • an opening angle bracket “<“, • some text name of the tag (tagname), • an ending angle bracket “>” • Example of tag: <span>, <table>, <a> … • Tags are often paired: <p>content</p>

  5. Basic HTML Document structure <html> <head></head> <body></body> </html> • This represents a blank website • <html> the page is in HTML format • <head> for information about page • <body> contains the visible content

  6. Web page, Web Browser • HTML documents describewebpages • Web page contains HTML tags and text • The purpose of a web browser is to read HTML documents and display them as web pages. • The browser does not display the HTML tags, but uses the tags to interpret a content of the web page

  7. HTML white spaces • HTML treats any number of space, tab, line-break as one space. • Line-break is caused by end of window or tag <br>. • Example: Result: <p>This is the first <br> sentence.</p> This is the first sentence.

  8. HTML Elements • An HTML element is everything between the start tag and the end tag, including the tags. • Example: <h1>This is a heading.</h1> • HTML elements represent paragraphs, tables, images etc.

  9. HTML Elements – HTML headings • HTML headings are defined with the <h1> to <h6> tags. • The <h1> is the main heading of the page. • Example: <h1>This is the main heading.</h1> <h2>Lower levelheading.</h2>

  10. HTML Elements – HTML paragraphs • HTML paragraphs are defined with the <p> tag. • Example: <p>This is a paragraph.</p>

  11. HTML attributes • HTML elements can have attributes. • These attributes provide additional information about elements. • Attributes are always specified in the start tag. • Attributes come in name/value pairs. • Example: <imgsrc = “image.jpg”width = “10px” />

  12. HTML Elements – HTML links • HTML links are defined with the <a> tag. • These tags are used to connect hypertext documents (link), as well as they are used to refer to parts of the current page (bookmark) • A hyperlink can be represented as a word, group of words or image.

  13. HTML Elements – HTML links • <a>has an important attribute “href” (i.e. hypertext reference) • The value of this attribute can be an URL or a reference to some element in current document. • Example: <a href = “http://www.google.com”> Google webpage</a>

  14. HTML Elements – HTML images • HTML images are defined with the <img> tag. • This tag needs an “attribute” - src for specification which image to display. • This tag is not paired. • Example: <imgsrc = “myimage.jpg”/>

  15. HTML attribute – src • This attribute represents a “source” (path to the file) • Example: <imgsrc= “images/my_photo.png” /> • The “width” attribute in “image” (<img>) element specifies the with of displayed image <imgsrc=“my_photo.png” width=“500px” />

  16. HTML Elements – HTML unordered lists • An unordered list is a simple list of items starting with bullets. • The lists start with <ul> pair tag. • Each item has the <li> pair tag. • Example: Result: <ul> <li>Dog</li> <li>Cat</li> </ul> • Dog • Cat

  17. HTML Elements – HTML ordered lists • An ordered list is a simple list of numbered items. • The lists start with <ol> pair tag. • Each item has the <li> pair tag. • Example: Result: <ol> <li>Dog</li> <li>Cat</li> </ol> • Dog • Cat

  18. HTML Elements – HTML definition lists • A definition list is a list of items, with a description for each item. • The <dl> tag defines a definition list. • The <dt> tag defines the item in the list. • The <dd> tag provides description for item. • Example: <dl> <dt>Dog</dt> <dd>that barks does not bite</dd> <dt>Cat</dt> <dd>sleeps hard and steps softly</dd> </dl>

  19. HTML Elements – HTML tables • Tables are defined with the <table> tag. • A table is divided into rows (<tr>). • Each row is divided into data cells (<td>). <table border="1" > <tr> <td>First</td> <td>Second</td> </tr> <tr> <td>Third</td> <td>Fourth</td> </tr> </table>

  20. HTML Elements – HTML tables II • Cell, that spans over two rows <td> attribute rowspan="no. rows" • Cell, that spans over two colums <td> attribute colspan="no. colums" <table border="1"> <tr> <td rowspan="2">First</td> <td colspan="2" >Second</td> </tr> <tr> <td>Third</td> <td>Fourth</td> </tr> </table>

  21. HTML block elements • The HTML <div> element is a block element. • Block element starts with a new line when displayed. • Block element can be used as a container for grouping other elements. • Example: <div>Text <p>Paragraph</p></div>

  22. HTML inline elements • The HTML <span> element is an inline element. • Inline element is (normally) displayed without starting a new line. • Inline element can be used as a container for text. • Example: <span>Text and only text.</span>

  23. HTML attribute – class • The attribute class specifies a classname for an element. • Each element can have one or more classes. • These classes can be used for grouping elements and commonly for CSS styling. • Example: <divclass = “content”>Some text.</div>

  24. And that’s all! • For more information you can visit web pages: • http://www.w3schools.com/hml/ • http://www.sitepoint.com/html/ • http://www.jakpsatweb.cz (in Czech)

More Related