HTML is Hyper Text Mark-up Language. Physicist Berners-Lee created it in late 1991. The most widely used language for the development of web pages is HTML. HTML will allow you to have an understanding of how the Web works so that your designs will be effective. To start learning HTML, you will require a Text Editor. For windows, Notepad++ provides syntax highlighting features. On a Mac, find TextEdit, and if you require syntax highlighting features then opt for Text Wrangler. For Linux users there is Gedit. This introduction to HTML familiarizes with the markup language and webpage design. Style HTML with CSS to enhance the look of your webpage. With HTML, section pages, and format content using div, article, and nav elements. Display images, create lists, and add links to downloadable content and other web pages in an HTML document.
- 1 Introduction to HTML: Structure
Introduction to HTML: Structure
An HTML document has two main part. The head element contains the title and metadata of a web document. The body element contains the information displayed on a web page.
Metadata is located between the tag and the tag. This data is about the HTML document. Meta tag data does not get displayed. Metadata defines the document title, character set, styles, links, scripts, and any other meta information.
A Comment tag starts with <!-– and ends with –->. Insert your comments in the comment tag. Use comments to explain your code so that when required you can edit the source code at a later date. Text placed does not display when placed within the comment tag.
The Structure of HTML document showing the head and body tags which include comment tags.
The paragraph tag
Tags, Attributes, Values
Adding an image with TextEdit on a Mac
The location of the image file and the HTML file need to be in the same directory. However, if the image file resides in another directory then the path or complete URL of the image has to be specified.
HTML provides <li> tag to enclose <ul> or <ol> tag to organize items in list forms. The list display in separate lines can start with a small bullet (unordered list) or with a number (ordered list).
To draw a table in HTML, use the <table> tag to enclose tags of rows <tr> and columns <td>. <th> & <caption> defines the header cell and caption in the table.
Cell padding and Cell spacing in HTML table.
The cell padding attribute describes the space, in pixels, between the cell wall and the cell content.
The cell spacing attribute describes the space, in pixels, between cells.
Introduction to HTML: Row Span and Col Span
HTML tables utilize the Row Span and Col Span attributes. The tables are divided into rows. Each row is divided into cells. The table cells span across more than one row or column.
The nested table is placed inside of another table. The larger table serves as a container for the smaller one.
Introduction to HTML: Forms
To create a Sign In Form, use the HTML elements <form>, <label>, <input>, <textarea>, and <button>.
Style the above HTML Sign In Form using CSS – Cascading Style Sheets.
An HTML Form contains form elements like text fields, submit buttons, and more. The element is displayed depending on the type attribute such as <input type=”text”> & <input type=”submit”>.
The <input type=”submit”> defines a button for submitting the form data to a form handler. The form handler is a server page with a script for processing input data and is specified in the form’s action attribute.
The action attribute defines the action to be performed when the form is submitted. The form data is sent to a web page on the server called “/formHandler.php” when the user clicks on the Submit button. This page contains a server-side PHP script that handles the form data.
HTML5 is supported by modern browsers. Use HTML5 tags to provide a relevant structure with a semantic markup to your HTML document. Define the structure and content of your web page by including HTML5 tags such as <header> | <main> | <nav> | <article> | <section> | <aside> | <address> | <footer> |