Download
1 / 24
240 likes | 491 Vues
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
E N D
Information Resources and Communication, WS 2013/2014 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 • Markup language is a set of markup tags
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.
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>
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
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
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.
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.
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>
HTML Elements – HTML paragraphs • HTML paragraphs are defined with the <p> tag. • Example: <p>This is a paragraph.</p>
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” />
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.
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>
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”/>
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” />
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
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
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>
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>
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>
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>
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>
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>
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)
