Html Workshop
- 1. What is HTML? • HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • HTML is a markup language • A markup language is a set of markup tags • The tags describe document content • HTML documents contain HTML tags and plain text • HTML documents are also called web pages
- 2. HTML Tags • HTML markup tags are usually called HTML tags • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a forward slash before the tag name • Start and end tags are also called opening tags and closing tags <tagname> content </tagname>
- 3. HTML Elements "HTML tags" and "HTML elements" are often used to describe the same thing. But strictly speaking: HTML element is everything between the start tag and the end tag, including the tags: HTML Element: <p>This is a paragraph.</p>
- 4. Web Browsers The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user:
- 6. HTML <!DOCTYPE> Declaration The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect. The <!DOCTYPE> tag does not have an end tag. The <!DOCTYPE> declaration is NOT case sensitive.
- 7. Save Your HTML? When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference. <!DOCTYPE html> <html> <head></head> <body> <h1> My First Heading. </h1> <p> My First Paragraph. </p> </body> </html>
- 8. HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> HTML Paragraphs HTML paragraphs are defined with the <p> tag. <p>This is a paragraph.</p>
- 9. HTML Links HTML links are defined with the <a> tag. <a href="http://www.google.com"> This is a link </a> HTML Images HTML images are defined with the <img> tag.. <img src=“http://www.tumo.org/templates/shaper_social/images/tumologosite2.png" width="104" height="142">
- 10. HTML Elements An HTML element is everything from the start tag to the end tag: • • • • • • • The first tag in a pair is the start tag, the second tag is the end tag. Start and end tags are also called opening tags and closing tags. The end tag is written like the start tag, with a forward slash before the tag name. The element content is everything between the start and the end tag. Some HTML elements have empty content. Empty elements are closed in the start tag. Most HTML elements can have attributes.
- 11. Empty HTML Elements HTML elements with no content are called empty elements. <br> is an empty element without a closing tag. <br> tag defines a line break. Use Lowercase Tags HTML tags are not case sensitive: (W3C) recommends lowercase.
- 12. HTML Attributes Attributes provide additional information about HTML elements. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value“ Attribute values should always be enclosed in quotes. Attribute names and attribute values are case-insensitive. <a href="http://google.com">This is a link</a>
- 13. HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages. Any given HTML document can only ever have one <h1> heading, however there are no restrictions on how many of the other levels of headings you can use. Don’t confuse the concept of HTML headings with the the <head> element.
- 14. HTML Lines The <hr> tag creates a horizontal line in an HTML page. <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>
- 15. HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.. <!-- This is a comment -->
- 16. HTML Paragraphs Paragraphs are defined with the <p> tag. <p>This is a paragraph </p> HTML Line Breaks Use the <br> tag if you want a line break without starting a new paragraph: The <br> element is an empty HTML element. It has no end tag. <p>This is <br> a para <br> graph with line breaks </p>
- 17. HTML Text Formatting <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is <sub> subscript</sub> and <sup> superscript </sup></p> <p>Do not forget to buy <mark>milk</mark> today.</p> Often <strong> renders as <b>, and <em> renders as <i>. However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only. <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important".
- 18. HTML Links A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination. The href attribute specifies the destination of a link. <a href="url">Link text</a>
- 19. HTML Links - The target Attribute The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab: <a href="http://www.google.com/" target="_blank">Visit W3Schools!</a> _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default)
- 20. HTML Links - The id Attribute The id attribute can be used to create a bookmark inside an HTML document. Bookmarks are not displayed in any special way. They are invisible to the readers. An anchor with an id inside an HTML document: <a id="tips">Useful Tips Section</a> Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a> Or, create a link to the "Useful Tips Section" from another page: <a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a>
- 21. The HTML <head> Element The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title> <style> <meta> <link> <script> <noscript>
- 22. The HTML <title> Element The <title> tag defines the title of the document. The <title> element: • defines a title in the browser toolbar • provides a title for the page when it is added to favorites • displays a title for the page in search-engine results <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
- 23. The HTML <link> Element The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets: <head> <link rel="stylesheet“ type="text/css“ href="mystyle.css"> </head>
- 24. The HTML <style> Element The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser: <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
- 25. The HTML <meta> Element Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <meta name="description" content="Free Web tutorials on HTML and CSS"> <meta http-equiv="refresh" content="30">
- 26. HTML Images In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. <img src=“URL“ alt=“some_text”>
- 27. HTML Images - The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). HTML Images - Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
- 28. HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). <td> stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
- 29. HTML Tables and the Border Attribute If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute: HTML Table Headers Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered. <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
- 30. HTML Table Tags Tag Description <table> Defines a table <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <caption> Defines a table caption <colgroup> Specifies a group of one or more columns in a table for formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table
- 31. HTML Lists The most common HTML lists are ordered and unordered lists: Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). <ul> <li>Coffee</li> <li>Milk</li> </ul> Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li>Coffee</li> <li>Milk</li> </ol>
- 32. HTML Description Lists A description list is a list of terms/names, with a description of each term/name. The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> HTML List Tags Tag Description <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a description list <dt> Defines a term/name in a description list <dd> Defines a description of a term/name in a description list
- 33. Most HTML elements are defined as block level elements or as inline elements. HTML Block Elements Block level elements normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>, <table> HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img>
- 34. The HTML <div> Element The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. The <div> tag is used to group block-elements to format them with CSS. The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. Most common use of the <div> element, is for document layout. The HTML <span> Element The HTML <span> element is an inline element that can be used as a container for text. The <span> tag is used to group inline-elements in a document. The <span> element has no special meaning. The <span> tag provides no visual change by itself. The <span> tag is used to group inline-elements in a document. <p>My mother has <span style="color:blue;">blue</span> eyes.</p>
- 35. HTML Forms HTML forms are used to pass data to a server. An HTML form can contain input elements like: text fields, checkboxes, radiobuttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. <form> … input elements … </form>
- 36. HTML Forms - The Input Element The most important form element is the <input> element. The <input> tag specifies an input field where the user can enter data. <input> elements are used within a <form> element to declare input controls that allow users to input data. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. The <input> element is empty, it contains attributes only.
- 37. Text Filed <input type="text"> defines a one-line input field that a user can enter text into: The default width of a text field is 20 characters. The name attribute can be set to anything you like as long as it is unique in the form <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> Password Filed <input type="password"> defines a password field: The characters in a password field are masked (shown as asterisks or circles). <form> Password: <input type="password" name="pwd"> </form>
- 38. Radio Buttons <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: HTML radio buttons are created by using several <input type=“radio”> buttons, all with the same name, but with different values. <form> <input type="radio" name="sex" value="male"> Male<br> <input type="radio" name="sex" value="female"> Female </form> Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. names of different elements can be different. <form> <input type=“checkbox" name=“vehicle" value=“Bike"> I have a bike <br> <input type=“checkbox" name=“vehicle" value=“Car"> I have a car </form>
- 39. Submit Buttons <input type=“submit"> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
- 40. Button Defines a clickable button (mostly used with a JavaScript to activate a script) <html> <head> <script> function msg() { alert("Hello world!"); } </script> </head> <body> <form> <input type="button" value="Click me" onclick="msg()"> </form> <p>The button above activates a JavaScript when it is clicked.</p> </body> </html>
- 41. HTML <button> Tag Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element. Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element. <!DOCTYPE html> <html> <body> <button type="button" onclick="alert('Hello world!')"> Click Me! </button> </body> </html>
- 42. <Label> tag The “<label>” element is used to create labels for input elements. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together. <form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br> <input type="submit" value="Submit"> </form>
- 43. HTML <input> type Attribute Values Text, Button, checkbox, password, radio, submit, file Value Color New Date New datetime datetime-local Email New Image Month New Number New Range New Reset Search Tel New Time New Url New Week New Description Defines a color picker Defines a date control (year, month and day (no time)) Defines a date and time control (year, month, day, hour, minute,) New Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone) Defines a field for an e-mail address Defines an image as the submit button Defines a month and year control (no time zone) Defines a field for entering a number Defines a control for entering a number whose exact value is not important (like a slider control) Defines a reset button (resets all form values to default values) Defines a text field for entering a search string Defines a field for entering a telephone number Defines a control for entering a time (no time zonze) Defines a field for entering a URL Defines a week and year control (no time zone)
- 44. <option> Tag The <option> tag defines an option in a select list. <option> elements go inside a <select> element. <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> Attributes Attribute Value Description disabled disabled Specifies that an option should be disabled label text Specifies a shorter label for an option selected selected Specifies that an option should be pre-selected when the page loads value text Specifies the value to be sent to a server
- 45. HTML Iframes An iframe is used to display a web page within a web page. The URL points to the location of the separate page. <iframe src="URL"></iframe> Iframe – Set Height and Width The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). <iframe src="demo_iframe.htm" width="200" height="200"></iframe>
- 46. Iframe – Remove the border The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border: <iframe src="demo_iframe.htm" frameborder="0"></iframe> Iframe – as a Target for a link An iframe can be used as the target frame for a link. The target attribute of a link must refer to the name attribute of the iframe: <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a"> W3Schools.com</a></p>
- 47. HTML Entitiess Some characters are reserved in HTML.It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character entities in the HTML source code. Entity names are case sensitive! Result Description Entity Name Entity Number non-breaking space   < less than < < > greater than > > & ampersand & & ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € § section § § © copyright © © ® registered trademark ® ® ™ trademark ™ ™