Introduction to HTML

Image: Introduction to HTML
Image: Introduction to HTML

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.

For more information, click on website-development.

Introduction to HTML: Structure

fig 1.1 - Basic HTML structure
fig 1.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 - Meta tag
fig 1.2 – 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

fig 1.5a - The Paragraph Tag.html
fig 1.5a – The Paragraph Tag.html
fig 1.5b - Output for The paragraph tag.html
fig 1.5b – Output for The paragraph tag.html

Tags, Attributes, Values

fig 1.6a - Tags, Attributes, Values.html
fig 1.6a – Tags, Attributes, Values.html
fig 1.6b - Output of  Tags, Attributes, Values.html
fig 1.6b – Output of Tags, Attributes, Values.html

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

fig 2.0a - cell-padding-and-cell-spacing-in-html-table.html
fig 2.0a – cell-padding-and-cell-spacing-in-html-table.html

 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.

JavaScript is used to capture and process data that has been entered into the form.

Digital Marketing Solutions

Thank you for subscribing.

Something went wrong.