Introduction to HTML - Structure webpages with HTML

Spread the love

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.

Introduction to HTML: Structure

fig1.1 - Basic HTML structure — fig1.1 – Basic 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.

fig 1.2 - HTML Meta tag — fig 1.2 – HTML Meta tag

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.

fig 1.3 - Introduction to HTML: Comment Tag — fig 1.3 – Introduction to HTML: Comment Tag

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.

fig1.4 - HTML document structure with no output. — fig1.4 – HTML document structure with no output.

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

fig 1.7a - Adding two image sizes on a web page — fig 1.7a – Adding two image sizes on a web page

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.

fig 1.7b - Output of two image sizes displayed on a web page — fig 1.7b – Output of two image sizes displayed on a web page

List tags

fig 1.8a -Introduction to HTML: List with blue background

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).

fig 1.8b - Introduction to HTML: Output of list with blue color background — fig 1.8b – Introduction to HTML: Output of list with blue color background

Table tags

fig 1.9a - table, border, height and width.html — fig 1.9a – table, border, height and width.html

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.

fig 1.9 b - Output of table, border, height and width. — fig 1.9 b – Output of table, border, height and width.

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.

fig 2.0b - Output of cell-padding-and-cell-spacing-in-html-table.html — fig 2.0b – Output of cell-padding-and-cell-spacing-in-html-table.html

Introduction to HTML: Row Span and Col Span

fig 2.0c - row-span, col-span, nested tables.html — fig 2.0c – row-span, col-span, nested tables.html

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.

fig 2.0d - Output of row-span, col-span, nested tables.html — fig 2.0d – Output of row-span, col-span, nested tables.html

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.

fig 2.1a - Sign In Form — fig 2.1a – Sign In Form

fig 2.1b - Output of Sign In Form — fig 2.1b – Output of Sign In Form

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

HTML Javascript

HTML provides structure while CSS styles your HTML to improve the layout of your website. Use Javascript to make your elements interactive for engaging with users. Javascript is a programming language used to dynamically add functionality to your web pages, validate forms, image manipulations, etc. Javascript code is written within the script tags either directly in an HTML file or by including an external .js file containing all the Javascript statements.