Scribd
Upload
16 views

HTML 1

The document is a syllabus for a web design course that discusses HTML. It covers what HTML is, its features and advantages/disadvantages. It describes the basic HTML page structure and elements like headings, paragraphs, breaks and images. It also discusses attributes like src, width, height and style and how to make text bold, italic, emphasized and add colors. Formatting elements like <b>, <em>, <i> etc are also covered.

Uploaded by

Anil Maurya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

HTML 1

The document is a syllabus for a web design course that discusses HTML. It covers what HTML is, its features and advantages/disadvantages. It describes the basic HTML page structure and elements like headings, paragraphs, breaks and images. It also discusses attributes like src, width, height and style and how to make text bold, italic, emphasized and add colors. Formatting elements like <b>, <em>, <i> etc are also covered.

Uploaded by

Anil Maurya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Subject : Web Designing

Subject Code: BCS -353


Faculty Name: Saijshree Srivastava
Syllabus
What is HTML?
• HTML stands for HyperText Markup Language. It is used to design the web pages. With the help
of HTML, you can create a complete website structure. HTML is the combination of Hypertext and
Markup language. Hypertext defines the link between the web pages and markup language defines
the text document within the tag that define the structure of web pages.
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.
HTML is a markup language used by the browser to manipulate text, images, and other content, in order to
display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of
HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1995.
Features of HTML:
• It is easy to learn and easy to use.
• It is platform-independent.
• Images, videos, and audio can be added to a web page.
• Hypertext can be added to the text.
• It is a markup language.
Why learn HTML?
• It is a simple markup language. Its implementation is easy.
• It is used to create a website.
• Helps in developing fundamentals about web programming.
• Boost professional career.
Advantages:
• HTML is used to build websites.
• It is supported by all browsers.
• It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
• HTML can only create static web pages. For dynamic web pages, other languages have to be
used.
• A large amount of code has to be written to create a simple web page.
• The security feature is not good.
Basic structure of HTML
HTML page structure: The basic structure of an HTML page is laid out below. It contains the
essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements)
upon which all web pages are created.
<!DOCTYPE html>: This is the document type declaration (not technically a tag). It declares
a document as being an HTML document. The doctype declaration is not case-sensitive.
<html>: This is called the HTML root element. All other elements are contained within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage.
<body>: The body tag is used to enclose all the visible content of a webpage. In other words,
the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file
using .html or .htm. Once saved as an HTML document, the file can be opened as a webpage
in the browser.
Note: Basic/built-in text editors are Notepad (Windows) and TextEdit (Macs). Basic text
editors are entirely sufficient for when you’re just getting started
Basic code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
HTML Headings: These tags help us to give headings to the content of a webpage. These tags are mainly
written inside the body tag. HTML provides us with six heading tags from <h1> to <h6>. Every tag displays
the heading in a different style and font size.
Most HTML heading tag that we use :-
• Heading 1
• Heading 2
• Heading 3

Output
HTML Paragraph: These tags help us to write paragraph statements on a webpage. They start with the <p> tag and
ends with </p>.
HTML Break: – These tags are used for inserting a single line type break. It does not have any closing tag. In
HTML the break tag is written as <br>.
Example: This example illustrates the use of the <p> tag for writing a paragraph statement in HTML.

Output:
HTML elements have attributes that will provide additional information about that
particular element. It takes 2 parameters, ie, a name & a value which define the properties
of the element and are placed inside the element tag.
Points to remember for attributes:
• Attributes always come in name/value pairs like this: attribute_name=”value”.
• Attributes are always added to the start tag of an HTML element.
• Attribute values should always be enclosed in quotes. Double style quotes (“ ”) are the most
common, but single style quotes (‘ ’) are also allowed.
• In some rare situations, like when the attribute value itself contains quotes, it is necessary to
use single quotes: name=’John “ShotGun” Nelson’ and vice-versa.
• Syntax:
<element attribute_name="attribute_value">
HTML src Attribute: If we want to insert an image into a webpage, then we need to use the <img>
tag and the src attribute. We will need to specify the address of the image as the attribute’s value inside
the double quote.
Example: This example explains the HTML src Attributes to specify the source address of the file.
<html>

<head>

<title>src Attribute</title>

</head>

<body>

<img src=

"C:\Users\Saij srivastava\Dropbox\PC\Downloads\27_03_17_074809_College.jpg">

</body>

</html>
Input:

<html>

<head>

<title>Width and Height</title>

</head>

<body>

<img src=

"C:\Users\Saij srivastava\Dropbox\PC\Downloads\27_03_17_074809_College.jpg"

width="300px" height="100px" >

</body>

</html> Output:
HTML href Attribute: This attribute is used to specify a link to any address. This attribute is used along
with the <a> tag. The link put inside the href attribute gets linked to the text displayed inside the<a> tag. On
clicking on the text we will be redirected to the link. By default, the link gets opened in the same tag but by
using the target attribute and setting its value to “_blank”, we will be redirected to another tab or another
window based on the browser’s configuration.
HTML style Attribute: This attribute is used to provide various CSS effects to the HTML elements such as
increasing font-size, changing font-family, coloring, etc.
Example: This example explains the HTML style Attributes to specify the style properties for the HTML
element.

Input

Output
Input

Output
Making text Bold or Strong: We can make the text bold using the <b> tag. The tag uses both opening and
closing tags. The text that needs to be made bold must be within <b> and </b> tag. We can also use
the <strong> tag to make the text strong, with added semantic importance. It also opens with <strong> and ends
with </strong> tag.

Output

Input
Making text Italic or emphasize: The <i> tag is used to italicise the text. It opens with <i> and ends
with </i> tag. The <em> tag is used to emphasize the text, with added semantic importance. It opens
with <em> and ends with </em> tag.

Output
Input
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

Input
Output
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule

Output

Input
The Poem Problem

Input

Output
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text

Input
Output
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more

Input Output

• The HTML Style Attribute

<tagname style="property:value;">
Background Color

Output
Input

Set background color for two different elements

Output
Input
Text Color
The CSS color property defines the text color for an HTML element

Input Output

Fonts

Output
Input
Text Size

Output

Input

Text Alignment

Input
Output
HTML Formatting Element

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

You might also like