HTML Basics: Overview, Tags and Document Structure, Study notes of Computer science

An overview of html, a markup language used for creating web pages. It introduces fundamental concepts such as hypertext, markup language, and the structure of a simple html document. The meaning and usage of basic html tags, including the <!doctype>, <html>, <head>, <title>, <body>, <h1>, and <p> tags.

Typology: Study notes

2018/2019

Uploaded on 06/26/2019

M4rrY
M4rrY 🇵🇰

1 document

1 / 4

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
LAB 1
1. HTML-Overview
HTML stands for Hypertext Markup Language, for creating Web pages.
At its heart, HTML is a fairly simple language made up of elements, which can be applied to
pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted
list? Is it part of a table?), structure a document into logical sections (Does it have a header?
Three columns of content? A navigation menu)? and embed content such as images and
videos into a page. This module will introduce the first two of these and introduce
fundamental concepts and syntax you need to know to understand HTML.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML
to simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
A Simple HTML Document
Either you can use Try it option available at the top right corner of the code box to check the
result of this HTML code, or let's save it in an HTML file test.htm using your favourite text
editor. Finally open it using a web browser like Internet Explorer or Google Chrome, or
Firefox etc. It must show the following output:
pf3
pf4

Partial preview of the text

Download HTML Basics: Overview, Tags and Document Structure and more Study notes Computer science in PDF only on Docsity!

LAB 1

1. HTML-Overview

HTML stands for H ypertext M arkup L anguage, for creating Web pages. At its heart, HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu)? and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

  • Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.
  • (^) As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.

A Simple HTML Document

Either you can use Try it option available at the top right corner of the code box to check the result of this HTML code, or let's save it in an HTML file test.htm using your favourite text editor. Finally open it using a web browser like Internet Explorer or Google Chrome, or Firefox etc. It must show the following output:

HTML Tags

As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces ****. Except few tags, most of the tags have their corresponding closing tags. For example, **** has its closing tag **** and **** tag has its closing tag **** tag etc.

Example Explained

  • The declaration defines this document to be HTML
  • The element is the root element of an HTML page
  • The element contains meta information about the document
  • The element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

HTML Document Structure

A typical HTML document will have the following structure:

2. HTML – BASIC TAGS

  • The <!DOCTYPE> Declaration The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other HTML tags.

  • (^) Heading Tags

DOCTYPE

html>

Input:

Output: