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 the way e.g. an editor or a printer would "mark up" a text, with annotations in the body and margins of the document. ● It could be said that the mother of all markup languages was SGML: Standard Generalized Markup Language. This was developed at IBM during the 1970s and 1980s, and eventually became an ISO standard. Several types of markup used commonly derived from the ideas in SGML, including HyperText Markup Language (HTML) and eXtensible Markup Language (XML) . Some other types of markup languages developed independently, such as TeX and LaTeX . 2
Hypertext Markup Language ● Hypertext Markup Language , better known as HTML , is the dominant format for the transfer of information across the Internet. It was the coupling of the idea for a browser with HTML that engendered the use of the term World Wide Web . ● Hypertext is simply a text that contains links to other texts. ● We deal with HTML in the form of documents/files that describe web pages. The file itself is just a plain text file containing tags that indicate formatting or other kinds of objects (e.g. images, tables, links, etc.) to insert. These files are sent across Internet or stored locally. ● When you open HTML document (either using some web address or just some file on your local machine) with a web browser , it processes plain text the document contains and displays a nice formatted web page – so you can actually see all of the objects described by the plain file. Most of the browser allow user to see what “raw” HTML code which is currently displayed. ● HTML is a declarative language which means that you define how the result should like, but don’t define which steps should be performed to achieve this result . This puts some restrictions on how much the result may be customized. In modern browsers this problem may be overcome with built-in JavaScript engines allowing to do additional manipulation with HTML . This makes possible to create dynamic Rich Web Applications which currently dominate on web. 3
Hypertext Markup Language Example: <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <p>This is another paragraph</p> </body> </html> 4
Hypertext Markup Language HTML files follow just a few rules: 1. Every HTML command is enclosed in < and > characters : e.g. <p> 2. Basic HTML atoms are called " tags ". Every opening tag must have a closing tag. Closing tags are the same as opening tags, except that the name of the tag is preceded by a slash: e.g. <p> has closing tag </p>. Opening and closing tags together may be referred as an HTML element. 3. The opening and closing tags enclose text whose format or content they specify. 4. If a tag does not enclose text, it can end itself : put a slash before the > character: e.g. <br/> 5. Tags must be nested (placed inside each other) properly: e.g. <b><i>bold italic text<i><b> is correct; <b><i>bold italic text<b><i> is not. 6. The behavior of HTML commands can be modified by inserting style specifications in the opening tag: e.g. <p style="text-align:center"> A Centered Paragraph <p> 7. HTML tags should be in lower case 5
Hypertext Markup Language ● Historically, HTML tags did not need to be closed, did not need to be nested properly, and it was even considered good style to write them in upper case letters. It is only with more recent updates to the language that these rules have become important. ● There are many tutorials available for HTML on the web - we list a few below. ● There is a tutorial at W3schools . You can find many more just by doing a web search for "HTML Tutorial". ● W3schools also provides a complete HTML tags reference here . ● There is no more authoritative source concerning HTML than the World Wide Web Consortium , which is an organization that defines the single HTML standard used by everyone. ● The latest version of HTML proposed by World Wide Web Consortium and supported by the most popular browser is HTML 5 . 6
Tags Nesting <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <p>This is another paragraph</p> </body> </html> 7
<html> , <head> and <body> tags ● <html> is a root tag for any HTML document, which means all contents of the document should be enclosed by this tag. ● <html> can have two child tags: <head> and <body> . ● <head> tag is mostly used to specify service information which is invisible to user, e.g. document metadata such as content type, encoding, document keywords, etc. An exception is a page title which should be defined in this section. Page title is usually displayed by browsers in window/tab title. Tag name used to define page title is simply <title>. ● <body> tag encloses the part of the document which is visible to user, so all the contents and description of its layout should be placed inside this tag. 8
Heading Tags ● Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading. ● Example: <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> 9
Defining Structure: < div>, <p>, <table>, <ul>, <ol>, <dl>, <span> and <br/> tags ● The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block- elements to format them with CSS . ● The <p> tag defines a paragraph. Browsers automatically add some space before and after each <p> element. ● An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. A table data/cell is defined with the <td> tag. ● An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default. ● An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default. You can override this behavior using type attribute with one of the following options: “1” (default), “A” , “a” , “I” , “i” . ● HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term. ● Also the <span> element is often used as a container for some text. When used together with CSS, the <span> element can be used to style parts of the text. The key difference from all the above tags is that span doesn’t create a new line. ● The <br/> tag inserts a single line break. The <br/> tag is an empty tag which means that it has no end tag. ● <tr>, <th>, <td>, <dt>, <dd> and <li> tags are examples of the tags that can only make sense as child elements of their specific parent tags and will have no effect outside these parent tags. ● <table> and <ul> , <ol> , <dl> are examples of the tags that can only make sense if some child elements are specified and shouldn’t contain any content on the top level. 10
Formatting Text ● HTML defines special elements for defining text with a special meaning: <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text 11
Recommend
More recommend
