Scribd
Upload
35 views16 pages

Unit 2 Study Materials

web programming BCA(BHARATHIAR UNIVERSITY)

Uploaded by

Mahe Miracle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views16 pages

Unit 2 Study Materials

web programming BCA(BHARATHIAR UNIVERSITY)

Uploaded by

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

HTML: Introduction and Getting Started

Introduction to HTML (1 hour)

Definition:

 HTML (HyperText Markup Language): The standard markup language used to create
web pages and web applications.
 Purpose: Structures the content on the web, such as text, images, links, and other
multimedia elements.

History:

 First version of html developed by Tim Berners-Lee in 1991.


 Evolved through various versions, with HTML5 being the latest standard providing more
robust and flexible features for modern web development.

Basic Structure of an HTML Document:

 HTML documents are plain text files with a .html or .htm extension.
 They consist of a series of elements that define the structure and content of the web page.

Example:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my first HTML page.</p>
</body>
</html>

How HTML Works

HTML documents are simple text files, which means you can create them using any text editor.
They are typically saved with a .html or .htm extension.

What makes HTML special is the use of tags. These are special keywords enclosed in angle
brackets (like < and >). These tags tell the web browser how to display the content.
For example, the tag <h1> tells the browser to display the enclosed text as a main heading, while
<p> is used for paragraphs.

Basic HTML Structure

Every HTML document has a basic structure:

 <!DOCTYPE html>: This declaration specifies the document type.


 <html></html>: This is the root element of an HTML page.
 <head></head>: Contains meta-information about the page, like the title.
 <body></body>: Contains the visible content of the page.

Common HTML Tags

We’ve already mentioned <h1> and <p>. Here are some other essential tags:

 <head>: Contains meta-information about the page, such as the title.


 <title>: Sets the title of the page, which appears in the browser's tab.
 <body>: Contains the visible content of the page.
 <img>: Inserts an image into the page.
 <a>: Creates a hyperlink to another page.

Headings

 Purpose: To structure content hierarchically.


 Tags: <h1> to <h6> (h1 being the most important, h6 the least).
 Usage: Use h1 for the main heading, h2 for subheadings, and so on.
 Example:

HTML

<h1>This is the main heading</h1>


<h2>This is a subheading</h2>
<h3>This is a sub-subheading</h3>

Paragraphs

 Purpose: To organize text into readable blocks.


 Tag: <p>
 Usage: Each paragraph should convey a complete thought.
 Example:

HTML

<p>This is the first paragraph. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
<p>This is the second paragraph.</p>
Lists

 Purpose: To present items in a structured format.


 Types:
o Unordered lists: <ul> with <li> for list items (no order).
o Ordered lists: <ol> with <li> for list items (numbered).
 Example:

HTML

<!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Output : An unordered HTML list

 Coffee
 Tea
 Milk

<!DOCTYPE html>

<html>
<body>

<h2>An ordered HTML list</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

Outpu: An ordered HTML list

1. Coffee
2. Tea
3. Milk

Creating Visual Appeal

Images

 Purpose: To insert images into a webpage.


 Tag: <img>
 Attributes:
o src: Specifies the image source.
o alt: Provides alternative text for images (important for accessibility).
o width and height: Optional attributes to specify dimensions.
 Example:

HTML

<img src="image.jpg" alt="A beautiful image" width="300" height="200">

Links

 Purpose: To connect to other web pages or resources.


 Tag: <a>
 Attributes:
o href: Specifies the link destination.(active Hypertext reference)
o target: Specifies where to open the linked document (e.g., _blank for a new tab).
 Example:

HTML

<a href="https://www.example.com">Visit Example</a>

Document Layout of an HTML Page

The document layout of an HTML page is essential to both the functionality and organization of
a webpage. It defines how the content is structured, and it ensures that the browser can correctly
interpret and render the webpage. Let’s dive deeper into each component of the HTML
document structure:

1. <!DOCTYPE html>: Document Type Declaration

 This declaration defines the version of HTML the document is written in. For modern
web development, <!DOCTYPE html> is used, which specifies that the document is
HTML5. This declaration helps the browser to render the page correctly, ensuring it
adheres to HTML5 standards.

2. <html> Tag: Root Element

 The <html> tag is the root of the HTML document. Everything within this tag is part of
the HTML content. It encloses all other HTML elements on the page, creating a
hierarchical structure.

Example:

<html>

<!-- Head and Body content goes here -->

</html>

<head> Section: Metadata and Links

 The <head> section contains information about the HTML document that is not displayed
directly on the webpage but is essential for the document's functionality. This section
typically includes:
o <title>: Sets the title of the webpage, which appears in the browser tab and is
important for SEO. It should be concise and descriptive of the page content.

Example:
<head>

<title>Welcome to My Website</title>

</head>

<meta> Tags: Provide metadata about the HTML document. Common meta tags include:

 charset: Specifies the character encoding (usually UTF-8).


 name: Used for specifying metadata such as description, keywords, and author.
 viewport: Ensures the page is displayed correctly on mobile devices.

Example:

<meta charset="UTF-8">

<meta name="description" content="A brief description of the page">

<meta name="keywords" content="HTML, web design, example">

<meta name="author" content="Your Name">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link>: Used to link external resources like stylesheets (CSS files). This is crucial for adding
styles to your HTML content.

Example:

<link rel="stylesheet" href="styles.css">

<script>: Links to external JavaScript files or includes inline JavaScript. JavaScript adds
interactivity to the webpage.

Example:

<script src="script.js"></script>

<style>: Allows embedding CSS styles directly within the document. Although using external
stylesheets is more common, inline styles can be useful for small projects or specific
customizations.

Example:

<style>

body { font-family: Arial, sans-serif; }


</style>

<body> Section: Visible Content

 The <body> section contains all the content that users see and interact with on the
webpage. It is the main container for text, images, videos, links, forms, and any other
elements that make up the web page.

Key elements within the <body>:

o Text content: Organized using headings (<h1> to <h6>), paragraphs (<p>), lists
(<ul>, <ol>), and other textual elements.
o Multimedia: Images (<img>), videos (<video>), and audio (<audio>).
o Links: Hyperlinks (<a>), which connect the webpage to other web resources.
o Forms: Elements that allow user input, such as text fields (<input>), buttons
(<button>), and dropdowns (<select>).

Example:

<body>

<h1>Welcome to My Website</h1>

<p>This is where you introduce your content.</p>

<img src="image.jpg" alt="A description of the image">

</body>

<header>, <footer>, and Semantic Elements:

 <header>: Typically contains introductory content or navigational links. It’s usually


placed at the top of the document and can include elements like the site logo, navigation
bar, or introductory text.

Example:

<header>

<h1>My Website</h1>

<nav>

<ul>

<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<footer>: Positioned at the bottom of the page, it typically contains information like copyright
details, contact information, or links to related pages. The footer is consistent across multiple
pages of a website.

Example:

<footer>

<p>2024 My Website. All rights reserved.</p>

</footer>

Semantic Elements: HTML5 introduced semantic elements like <section>, <article>,


<aside>, and <nav> to better define the different parts of a webpage. These elements improve
both SEO and accessibility by clearly describing the purpose of content blocks.

Example:

<section>

<h2>About Us</h2>

<p>Information about the website or company.</p>

</section>

<article>

<h3>Latest News</h3>

<p>Content of an article or blog post.</p>

</article>
Example of a Complete HTML Document Layout

Here's how all these components come together in a full HTML document:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Webpage</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Welcome to My Website</h1>

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<section>
<h2>About Us</h2>

<p>This section provides information about our website or company.</p>

</section>

<article>

<h3>Latest News</h3>

<p>Details about the latest developments and articles.</p>

</article>

<footer>

<p>&copy; 2024 My Website. All rights reserved.</p>

</footer>

</body>

</html>

This example demonstrates the full structure of an HTML document, providing a clear and
organized layout for both content and metadata. Understanding this layout is fundamental to
creating web pages that are both functional and easy to maintain.

HTML Elements

HTML elements are the fundamental building blocks of an HTML document. They define the
structure and content of a webpage. Each HTML element typically consists of a start tag,
content, and an end tag. Here’s a detailed look at some of the most important HTML elements:

1. Headings (<h1> to <h6>)

 Headings are used to define the hierarchical structure of content on a webpage. There are
six levels of headings, from <h1> (the highest level) to <h6> (the lowest level).
o <h1>: Represents the main heading of a page. It’s usually the largest and most
important heading.
o <h2> to <h6>: Represent subheadings, with decreasing importance and size.
Example:

<h1>Main Heading</h1>

<h2>Subheading Level 1</h2>

<h3>Subheading Level 2</h3>

Headings are crucial for both SEO and accessibility, as search engines and screen readers use
them to understand the structure and importance of content.

Paragraphs (<p>)

 The <p> element is used to define a block of text as a paragraph. It’s a block-level
element, meaning it automatically starts on a new line and takes up the full width
available.

Example:

<p>This is a paragraph of text on the webpage.</p>

Links (<a>)

 The <a> element, known as the anchor tag, is used to create hyperlinks. The href
attribute specifies the destination URL. Links are essential for navigating between web
pages and other resources on the web.

Example:

<a href="http://www.example.com">Visit Example.com</a>

Links can also be used to link to other sections within the same page, by using an id attribute in
the destination element and a hash symbol # in the link.

Example:

<a href="#section1">Go to Section 1</a>

...

<h2 id="section1">Section 1</h2>

Images (<img>) :

 The <img> element is used to embed images in a webpage. It’s a self-closing tag,
meaning it doesn’t need an end tag. The src attribute specifies the path to the image file,
and the alt attribute provides alternative text for the image (important for accessibility
and SEO).

Example:

<img src="image.jpg" alt="Description of the image">

Images enhance the visual appeal of a webpage and can also convey important information.

Lists

 HTML provides two types of lists: ordered lists and unordered lists.
o Ordered List (<ol>): This creates a list of items with numbers or letters,
indicating a sequence.

Example:

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

Unordered List (<ul>): This creates a list of items with bullet points, without any particular
order.

Example

<ul>

<li>Item one</li>

<li>Item two</li>

<li>Item three</li>

</ul>

List Item (<li>): Each item in a list is wrapped in an <li> tag.

Tables (<table>)
 The <table> element is used to display data in a tabular format, organized in rows and
columns.
o <tr> (Table Row): Defines a row in the table.
o <th> (Table Header): Defines a header cell in a table, typically displayed in bold
and centered by default.
o <td> (Table Data): Defines a data cell in a table, containing the actual content.

Example:

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Data 1</td>

<td>Data 2</td>

</tr>

<tr>

<td>Data 3</td>

<td>Data 4</td>

</tr>

</table>

Tables are useful for displaying structured data, such as comparison charts, schedules, or any
content that benefits from a grid layout.

Forms (<form>)

 The <form> element is used to collect user input. Forms can include various types of
input fields, such as text boxes, radio buttons, checkboxes, and submit buttons.
o <input>: Used to create input fields. The type attribute defines the type of input
(e.g., text, password, submit).
o <label>: Provides a label for an input element, making forms more accessible.
o <textarea>: Allows users to enter multi-line text.
o <select>: Creates a dropdown list.
o <button>: Represents a clickable button.

Example:

<form action="/submit_form" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<label for="email">Email:</label>

<input type="email" id="email" name="email">

<button type="submit">Submit</button>

</form>

Semantic Elements (<header>, <footer>, <article>, <section>, <nav>)

 HTML5 introduced several semantic elements to clearly define different parts of a


webpage, improving both accessibility and SEO.
o <header>: Represents introductory content, typically a group of introductory or
navigational aids.
o <footer>: Represents the footer for its nearest sectioning content or sectioning
root element.
o <article>: Represents a self-contained composition in a document, page, or
application.
o <section>: Represents a standalone section that typically contains a thematic
grouping of content.
o <nav>: Represents a section of the page intended for navigation links.

Example:

<header>

<h1>My Website</h1>

</header>
<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<section>

<h2>About Us</h2>

<p>Information about the website or company.</p>

</section>

<article>

<h3>Latest News</h3>

<p>Content of an article or blog post.</p>

</article>

<footer>

<p>&copy; 2024 My Website. All rights reserved.</p>

</footer>
These semantic elements enhance the readability and organization of the HTML code, making it
easier for developers, search engines, and assistive technologies to understand the structure of
the content.

Inline Elements (<span>, <a>, <strong>, <em>)

 Inline elements are used for content that does not break the flow of text within a block-
level element.
o <span>: A generic inline container used to group content for styling or scripting.
o <a>: As mentioned earlier, creates hyperlinks.
o <strong>: Indicates strong importance, typically rendered in bold.
o <em>: Represents emphasized text, typically rendered in italics.

Example:

<p>This is a <strong>very important</strong> sentence with <em>emphasized</em>


words.</p>

<p><span class="highlight">This text is highlighted using a span.</span></p>

Inline elements are essential for fine-tuning the appearance of text and other content within a
webpage without disrupting the document’s overall layout.

You might also like