Scribd
Upload
32 views11 pages

Web Unit 2

Web Programming

Uploaded by

Romela Preena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views11 pages

Web Unit 2

Web Programming

Uploaded by

Romela Preena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML - Introduction

What is HTML?

 HTML Stands for HyperText Markup Language, where

 HyperText stands for Link between web pages.

 Markup Language means Text between tags that define the structure.

 HTML is a markup language that is used to create web pages. It defines how the
web page looks and how to display content with the help of elements.

 It forms or defines the structure of our Web Page, thus it forms or defines the
structure of our Web Page. We must remember to save your file with .html
extension.
Applications of HTML
HTML is used for various purposes. Let us take a look at them

 Web Pages Development

 Embedding Images and Videos

 Clinet-side storage

 Game development

 Data entry support

 Interacting with Native APIs


Features of HTML
 The learning curve is very easy (easy to modify)

 Creating effective presentations

 Adding Links wherein we can add references

 Can display documents on platforms like Mac, Windows, Linux, etc

 Adding videos, graphics, and audios making it more attractive

 Case insensitive language

HTML Editor
 Simple editor: Notepad Visual Studio Code Notepad++

 Atom

 Best editor: Sublime Text


How does HTML work?

 The average website includes several different HTML pages.

 For instance, a home page, an about page, and a contact page would all have separate HTML
files. HTML documents are files that end with a .html or .htm extension.

 A web browser reads the HTML file and renders its content so that internet users can view it.
All HTML pages have a series of HTML elements, consisting of a set of tags and attributes.

 HTML elements are the building blocks of a web page.

 A tag tells the web browser where an element begins and ends, whereas an attribute describes
the characteristics of an element.
The three main parts of an element are:

 Opening tag – used to state where an element starts to take effect. The tag is wrapped
with opening and closing angle brackets. For example, use the start tag <p> to create a
paragraph.

 Content – this is the output that other users see.

 Closing tag – the same as the opening tag, but with a forward slash before the element
name. For example, </p> to end a paragraph.
The combination of these three parts will create an HTML element:

 <p>This is how you add a paragraph in HTML.</p>

For example, a style element adding the color purple and the font-family verdana will look
like this:

 <p style="color:purple;font-family:verdana">This is how you add a paragraph in


HTML.</p>
Getting Started

HTML Skeleton

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
You can declare all the elements
</body>
</html>
HTML Basic
<!DOCTYPE html>
Instruction to the browser about the HTML version.
<html>

Root element which acts as a container to hold all the code .


The browser should know that this is an HTML document Permitted content: One head tag followed by one body
tag

<head>

Everything written here will never be displayed in the browser. It contains general information about the
document Title, definitions of CSS and script sheets Metadata(information about the document)

<body>

Everything written here will be displayed in the browser .Contains text, images, links that can be achieved
through tags
Examples:
<p> This is our first paragraph. </p>
<a href=”http://www.google.com”>Go To Google</a>
<img src=”photo.jpg”>
HTML Comment

 Comments don’t render on the browser


 Helps to understand our code better and makes it readable. Helps to debug our code

Three ways to comment:

 Single line
 Multiple lines
 Comment tag //Supported by IE
How Does HTML Work?
What are HTML tags?

Essentially, HTML tags are markers which tell the browser how the enclosed text
should be displayed. Here’s a simple example:
<b>This text should be bold.</b>

 In this case, <b> and </b> are the HTML tags. They are marking the enclosed text as
“bold”—hence, the “markup” element of HTML. We’ll explain how to actually write tags
in the next section.
 Once the document is complete, the author saves it as a html file and opens it in their
internet browser. The browser then reads the file and follows the instructions to render the
page in a certain way—as provided by the HTML tags.
 So, when you use the “bold” tags, you’re essentially telling the browser to display this
sentence in bold:

<b>This text should be bold.</b>

 When the browser reads this, it knows to display the sentence as described: This text should
be bold. Of course, the HTML tags themselves are not displayed in the browser (unless you
make a mistake writing them!).
Tags

 HTML tags are written inside angle brackets, and tend to come in pairs—so, they consist of both an opening and a
closing tag.
 For example, the <p> tag is used to indicate a new paragraph. The opening tag is written as follows:
 <p>. After this tag, you write your paragraph. To finish, add your closing tag, which is the same as the opening tag
but with a forward slash. In this case, it would be: </p>.
 A pair of tags with text enclosed is known as an element. Here are some examples of common HTML elements
and their corresponding tags:

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<b>This is a bold sentence</b>
<i>This is an italic sentence</i>
 Most HTML tags follow this open-and-closing pattern, but there are also some tags which only need an opening
tag to be valid.
 These are known as singleton tags, and include things like <br> to indicate a line break, and <img> for including
an image.
 The browser will understand and act on these tags without the need for a closing tag.
Attributes

 Attributes provide extra information about the text contained within the tags.

 For example, if you wanted to hyperlink the phrase “my website” in your HTML document, you would
first use the tag pairs <a> and </a> to specify that the text should be linked.

 To tell the browser where the text should be linked to—i.e. the link address—you use the href attribute.
Attributes, like the text, are always enclosed within the tags:

 HTML: <a href=”https://www.google.com”>Mywebsite</a>

You might also like