HTML - LinkedIn
Download as PPTX, PDF2 likes1,154 views
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It uses tags to define paragraphs, headings, lists, links and other elements. The basic structure of an HTML document includes the <html>, <head> and <body> tags. Common elements include headings, paragraphs, links, images, lists and tables. CSS (Cascading Style Sheets) is used to style and lay out HTML elements.
HTML - LinkedIn
- 1. <HTML>By: Gino Louie Peña
- 2. What is HTML? HTML stands for Hyper Text Markup Language. It is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet or in any browser.
- 3. Brief History of HTML Before we enjoy the beauty and comfort of surfing the internet let us have a quick overview of the language that allows us to scan our FB feeds, post or tweets and upload images of our food and whereabouts. • Tim Berners-Lee invents the Web with HTML as its publishing language in 1989 • In 1991 an Open discussion about HTML across the Internet begins. • 1994 - HTML specification for HTML 2 is released as well as the formation of World Wide Web Consortium to fulfill the potential of the Web through the development of open standards. • August of 1995, Microsoft's Internet Explorer browser comes out and in the same year of November Style sheets for HTML begin to take shape. • HTML 3.2 was ready last January 1997 and W3 Consortium formally endorsed HTML 3.2 as an HTML cross-industry specification. One might well ask why HTML 3.2 was called HTML 3.2 and not, let's say, HTML 3.1 or HTML 3.5. The version number is open to discussion just as much as is any other aspect of HTML. The version number is often one of the last details to be decided. • Spring of 1998 HTML4 is fully materialized. • HTML 5 started to sprung in 2009
- 4. How does HTML work? HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended.
- 5. Trivia You can write your own HTML document (webpage) using notepad. Simply save the document with “.html” or “.htm” extension.
- 6. Composition of HTML • Tags • Elements • Attributes • Forms • Events • Methods • Doctypes • Entities
- 7. Basic structure of HTML Doctype HTML Head Body
- 8. Basic HTML structure in code All HTML documents must start with a type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The HTML document itself has a header <head> which with end code of </head>, usually the title And some scripts are located here. The visible part of the HTML document is between <body> and </body>.
- 9. HTML Elements The <html> element defines the whole document. It has a start tag and an end tag . The element content is another HTML element HTML elements are written with a start tag, with an end tag, with the content in between: <tagname>content</tagname> Example: <p>My first HTML paragraph.</p> HTML elements can be nested (elements can contain elements). The HTML5 standard does not require lowercase tags, but it is recommended to use lowercase in HTML4, and demands lowercase for stricter document types like XHTML. <html> </html>
- 10. HTML tags Tag Description <!DOCTYPE> Defines the document type <html> Defines an HTML document <title> Defines a title for the document <body> Defines the document's body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a thematic change in the content <!--...--> Defines a comment Basic HTML Formatting Tag Description <b> Defines bold text <blockquote> Defines a section that is quoted from another source <cite> Defines the title of a work <del> Defines text that has been deleted from a document <font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text <i> Defines a part of text in an alternate voice or mood <pre> Defines preformatted text <q> Defines a short quotation <rt> Defines an explanation/pronunciation of characters (for East Asian typography) <s> Defines text that is no longer correct <strike> Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <time> Defines a date/time <u> Defines text that should be stylistically different from normal text
- 11. Tag Description <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <button> Defines a clickable button <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <datalist> Specifies a list of pre-defined options for input controls <keygen> Defines a key-pair generator field (for forms) <output> Defines the result of a calculation Forms and Input Tag Description <img> Defines an image <map> Defines a client-side image-map <area> Defines an area inside an image-map <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) <figcaption> Defines a caption for a <figure> element <figure> Specifies self-contained content Images Tag Description <a> Defines a hyperlink <link> Defines the relationship between a document and an external resource (most used to link to style sheets) <nav> Defines navigation links Links
- 12. Tag Description <ul> Defines an unordered list <ol> Defines an ordered list <li> Defines a list item <dir> Not supported in HTML5. Use <ul> instead. Defines a directory list <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 <menu> Defines a list/menu of commands <menuitem> Defines a command/menu item that the user can invoke from a popup menu Lists Tag Description <table> Defines a table <caption> Defines a table caption <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table <col> Specifies column properties for each column within a <colgroup> element <colgroup> Specifies a group of one or more columns in a table for formatting Tables
- 13. Tag Description <script> Defines a client-side script <noscript> Defines an alternate content for users that do not support client-side scripts <applet> Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet <embed> Defines a container for an external (non-HTML) application <object> Defines an embedded object <param> Defines a parameter for an object Programming Tag Description <style> Defines style information for a document <div> Defines a section in a document <span> Defines a section in a document Styles and Semantics Tag Description <head> Defines information about the document <meta> Defines metadata about an HTML document <base> Specifies the base URL/target for all relative URLs in a document <basefont> Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document Meta Info
- 14. HTML Attributes Attributes provide additional information about HTML elements. – 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" Attribute Description accesskey Specifies a shortcut key to activate/focus an element class Specifies one or more classnames for an element (refers to a class in a style sheet) contenteditable Specifies whether the content of an element is editable or not contextmenu Specifies a context menu for an element. The context menu appears when a user right-clicks on the element data-* Used to store custom data private to the page or application dir Specifies the text direction for the content in an element draggable Specifies whether an element is draggable or not dropzone Specifies whether the dragged data is copied, moved, or linked, when dropped hidden Specifies that an element is not yet, or is no longer, relevant id Specifies a unique id for an element lang Specifies the language of the element's content spellcheck Specifies whether the element is to have its spelling and grammar checked or not style Specifies an inline CSS style for an element tabindex Specifies the tabbing order of an element title Specifies extra information about an element translate Specifies whether the content of an element should be translated or not
- 15. Creating table in the HTML document Tables are defined with the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. A table row can also be divided into table headings with the <th> tag. Table data <td> are the data containers of the table. They can contain all sorts of HTML elements like text, images, lists, other tables, etc. <!DOCTYPE html> <html> <body> <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> Result
- 16. <!DOCTYPE html> <html> <body> <h2>Ordered List with Numbers</h2> <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers Creating a list in HTML There are 2 types of list that we can do in HTML namely the ordered list and unordered list. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers. A type attribute can be added to an ordered list, to define the type of the marker: Result
- 17. Style Description list-style-type:disc The list items will be marked with bullets (default) list-style-type:circle The list items will be marked with circles list-style-type:square The list items will be marked with squares list-style-type:none The list items will not be marked <!DOCTYPE html> <html> <body> <h2>Unordered List with Disc Bullets</h2> <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> Creating a list in HTML 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). A style attribute can be added to an unordered list, to define the style of the marker: Result
- 18. Both the width, the height, and the style attributes, are valid in the latest HTML5 standard. We suggest you use the style attribute. It prevents styles sheets from changing the default size of images: Inserting pictures in HTML document In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute defines the url (web address) of the image: <img src="url" alt="some_text"> <!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body> <p>It is better to use the style attribute (instead of the width and height attributes), because it prevents internal or external styles sheets to change the default size of an image:</p> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px"> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> </body> </html>
- 19. Inserting pictures in HTML document (continuation) Result
- 20. Blocks & Spans in HTML The HTML <div> element is a block level element that can be used as a container for other HTML elements. The <div> element has no special meaning. It has no required attributes, but style and class are common. Because it is a block level element, the browser will display line breaks before and after it. When used together with CSS, the <div> element can be used to style blocks of content. The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. It has no required attributes, but style and class are common. Unlike <div>, which is formatted with line breaks, the <span> element does not have any automatic formatting. When used together with CSS, the <span> element can be used to style parts of the text: <h1>My <span style="color:red">Important</span> Heading</h1>
- 21. Creating links HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to another document. In HTML, links are defined with the <a> tag: <a href="url">link text</a> Example: The href attribute specifies the destination address (http://www.google.com/) The link text is the visible part (Visit our HTML tutorial). Clicking on the link text, will send you to the specified address. <a href="http://www.google.com/">Visit Google</a>
- 22. HTML is boring I know HTML is boring because it is the frame or the skeleton of your webpage. CSS will beautify your webpage and make it pleasing and attractive, but what is CSS?
- 23. CSS CSS stands for Cascading Style Sheets Styling can be added to HTML elements in 3 ways: • Inline - using a style attribute in HTML elements • Internal - using a <style> element in the HTML <head> section • External - using one or more external CSS files The most common way to add styling, is to keep the styles in separate CSS files.