Scribd
Upload
30 views

Wddnotes - Unit 1 HTML

Uploaded by

Byg Basher
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

Wddnotes - Unit 1 HTML

Uploaded by

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

WEB DEVELOPMENT DESIGNING

UNIT 1

Html
HTML (Hypertext Markup Language) is the standard markup language
for creating web pages. It describes the structure and content of a
webpage using a system of elements and tags. HTML allows developers
to organize text, embed images and videos, create links, and structure
the layout of a document. It works in conjunction with CSS for styling
and JavaScript for interactivity. HTML is the backbone of the World
Wide Web, interpreted by browsers to render visual representations of
web content.

From HTML code to HTML WEBPAGE


Writing HTML Code
The process begins with writing HTML (Hypertext Markup Language)
code. This involves:
Setting up the basic structure (<!DOCTYPE html>, <html>, <head>,
<body>)
Adding content using various HTML tags (<h1>, <p>, <div>, etc.)
Incorporating links, images, and other media
Ensuring proper semantic structure for accessibility and SEO

Styling with CSS


After the HTML structure is in place, Cascading Style Sheets (CSS) are
used to style the page:
Create a separate CSS file or use internal <style> tags
Define styles for HTML elements, classes, and IDs
Implement responsive design using media queries
Ensure consistent styling across different browsers

Adding Interactivity with JavaScript


To create dynamic and interactive elements:

Write JavaScript code to manipulate the DOM


Handle user events (clicks, form submissions, etc.)
Implement client-side validation
Create animations and other interactive features
Testing
Before deployment, thorough testing is crucial:
Check for proper rendering across different browsers and devices
Validate HTML and CSS
Test all interactive features and forms
Ensure accessibility compliance
Optimize for performance (load times, responsiveness)

Optimization
Prepare the site for optimal performance:
Minify CSS, JavaScript, and HTML
Optimize images and other media
Implement caching strategies
Use Content Delivery Networks (CDNs) for static assets

Choosing a Hosting Provider


Select a web hosting service based on:

 Type of hosting (shared, VPS, dedicated, cloud)


 Server specifications (storage, bandwidth, processing power)
 Supported technologies (PHP, Node.js, etc., if required)
 Reliability and uptime guarantees
 Cost and scalability options

Domain Name Registration


If not already done:

Choose a domain name


Register it with a domain registrar
Configure DNS settings to point to your hosting provider

Uploading Files
Transfer your web files to the hosting server:
Use FTP (File Transfer Protocol) or SFTP (Secure File Transfer
Protocol)
Alternatively, use the hosting provider's file manager or Git integration
Configuring Server Settings
Set up the server environment:
Configure web server software (e.g., Apache, Nginx)
Set up SSL certificates for HTTPS
Configure any necessary server-side technologies (PHP, databases, etc.)

Final Testing
Perform a final round of testing on the live environment:
Check all pages and features
Verify proper loading of all assets
Test forms and server-side functionality
Ensure security measures are in place

Launch and Monitoring


Once everything is set up and tested:

Announce the website launch if applicable


Monitor website traffic and performance
Set up analytics tools (e.g., Google Analytics)
Implement logging and error tracking

Maintenance and Updates


Ongoing tasks after deployment:
Regularly update content
Apply security patches and updates to all software
Monitor and optimize performance
Backup website files and databases regularly

By following these steps, you can successfully move from writing


HTML code to deploying and maintaining a fully functional website.
Text Paragraphs in HTML
Introduction
In HTML (Hypertext Markup Language), paragraphs are fundamental
elements used to structure and organize text content. They are essential
for creating readable and well- formatted web pages. HTML paragraphs
are defined using the <p> tag.
Basic Structure
The basic structure of an HTML paragraph is as follows:
html
<p>This is a paragraph of text.</p>

Everything between the opening <p> tag and the closing </p> tag is
considered part of the paragraph.

Characteristics of HTML Paragraphs:


Block-level Element: Paragraphs are block-level elements, meaning they
typically start on a new line and take up the full width available.
Automatic Spacing: Browsers automatically add some space (margin)
before and after each <p> element.
Text Wrapping: Text within a paragraph automatically wraps to the next
line when it
reaches the edge of its containing element.
Whitespace Handling: Multiple spaces and line breaks within the HTML
are typically rendered as a single space in the browser.

Styling Paragraphs
While paragraphs have default styling, you can customize their
appearance using CSS:
html

<p style="color: blue; font-size: 16px; line-height: 1.5;">


This is a styled paragraph.
</p>
It's generally better to use external CSS for styling:
css

p {
color: blue;
font-size: 16px;
line-height: 1.5;
}
Common Use Cases
Body Text: The main content of articles, blog posts, or informational
pages.
Descriptions: Product descriptions, bios, or explanatory text.
Quotes: When combined with the <blockquote> element for longer
quotations.

Best Practices
Semantic Usage: Use <p> tags for actual paragraphs, not for spacing or
layout purposes.
Readability: Keep paragraphs relatively short for better readability on the
web.
Consistency: Maintain consistent styling across paragraphs for a cohesive
look.
Accessibility: Ensure proper contrast between text and background colors.

Advanced Techniques
Drop Caps: Create stylized first letters using CSS:

css

p::first-letter {
font-size: 2em;
font-weight: bold;
}

Columns: Split text into columns for newspaper-like layouts:

css

.column-text {
column-count: 2;
column-gap: 40px;
}

Text Indent: Indent the first line of paragraphs:

css

p {
text-indent: 20px;
}
Common Mistakes to Avoid
 Using <br> tags to create space between paragraphs instead of
proper <p> tags.
 Nesting block-level elements (like <div>) inside paragraphs,
which is invalid HTML.
 Using paragraphs for non-textual content or for layout purposes.
 Implicit vs Explicit Tags in HTML
 Explicit Tags
 Explicit tags are HTML elements that are directly written in the
code by the developer. They have both opening and closing tags
(in most cases) and clearly define the structure and content of an
HTML document.

Characteristics:
Clearly visible in the HTML source code
Provide precise control over document structure
Most HTML elements are explicit

Examples:
html
<p>This is a paragraph.</p>
<div>This is a division.</div>
<h1>This is a heading.</h1>

Implicit Tags
Implicit tags are elements that are automatically inserted by the
browser's HTML parser, even when not explicitly written in the source
code. They are assumed to be present based on the document's structure
or the HTML specification.

Characteristics:
Not visible in the source code
Inserted by the browser to ensure proper document structure
Limited to a few specific cases in HTML

Examples:
<html>: If omitted, the browser will implicitly create it.
<head>: If missing, it's implicitly created before the <body>.
<body>: If absent, the browser assumes its presence.
<tbody>: Automatically inserted in tables if not explicitly defined.
Key Differences
Visibility:
Explicit tags are visible in the source code.
Implicit tags are not present in the source but are added by the browser.
Control:
Explicit tags offer direct control over document structure.
Implicit tags are based on browser behavior and HTML specifications.
Flexibility:
Explicit tags allow for more flexible and precise document structuring.
Implicit tags are limited to specific elements and scenarios.
Performance:
Explicit tags might slightly increase file size but ensure clarity.
Implicit tags can reduce file size but may lead to less clear code.
Compatibility:
Explicit tags ensure consistent behavior across different browsers.
Reliance on implicit tags may occasionally lead to rendering differences.

Best Practices
Use explicit tags for clear, maintainable code.
Understand where implicit tags are used to avoid confusion.
Don't rely on implicit tags for critical document structure.
Be aware of implicit tags when debugging layout issues.

Opening and Closing Tags in HTML

Introduction
HTML (Hypertext Markup Language) uses a system of tags to define
the structure and content of web pages. Most HTML elements consist of
an opening tag and a closing tag, which together enclose the content
they affect. Understanding how these tags work is fundamental to
writing correct HTML.

Basic Structure
An HTML element typically follows this structure:
<tagname>Content goes here</tagname>
<tagname> is the opening tag
</tagname> is the closing tag
The content is placed between these tags
Types of Tags
Paired Tags: Most HTML elements use paired tags. Example: <p>,
</p> for paragraphs
Self-closing Tags: Some elements don't need a closing tag. Example:
<img>, <br>,
<input>

Common HTML Tags


Here are some frequently used HTML tags:

Headings: <h1> to <h6>


Paragraphs: <p>
Links: <a>
Images: <img>
Lists: <ul>, <ol>, <li>
Div (division): <div>
Span: <span>

Nesting Tags
HTML elements can be nested inside each other. When nesting, it's
crucial to close tags in the reverse order they were opened.

Correct Nesting:
html
<div>
<p>This is <strong>correct</strong> nesting.</p>
</div>

Incorrect Nesting:
html
<div>
<p>This is <strong>incorrect nesting.</p>
</div></strong>
Importance of Proper Tag Usage
Structure: Defines the hierarchical structure of the document.
Semantics: Provides meaning to the content for browsers and search
engines.
Styling: Allows for precise CSS styling.
Functionality: Enables proper JavaScript interaction.
Accessibility: Ensures screen readers can interpret the content correctly.

Common Mistakes to Avoid


Forgetting to close tags
Incorrect nesting of tags
Using deprecated tags (like <font>)
Misusing semantic tags (e.g., using <div> instead of more appropriate
semantic elements)

Document Structure
<!DOCTYPE html>: Declares the document type and HTML version.
<html>: The root element of an HTML page.
<head>: Contains meta information about the document.
<body>: Defines the document's body, which contains all the visible
contents.

Metadata
<title>: Specifies a title for the HTML page (shown in browser's title
bar or page's tab).
<meta>: Specifies metadata about an HTML document.
<link>: Defines the relationship between a document and an external
resource.
<style>: Used to write inline CSS.
<script>: Used to embed a client-side script (JavaScript).

Text Content
<h1> to <h6>: Defines HTML headings.
<p>: Defines a paragraph.
<br>: Produces a line break in text (carriage-return).
<hr>: Represents a thematic break between paragraph-level elements.
<pre>: Defines preformatted text.
<blockquote>: Specifies a section that is quoted from another
source.
Inline Text Semantics
<a>: Defines a hyperlink.
<strong>: Defines important text.
<em>: Defines emphasized text.
<span>: Used to group inline-elements in a document.
<code>: Defines a piece of computer code.
<sub>: Defines subscripted text.
<sup>: Defines superscripted text.
<i>: Defines a part of text in an alternate voice or mood.
<b>: Specifies bold text without extra importance.
<mark>: Defines marked/highlighted text.

Lists
<ul>: Defines an unordered list.
<ol>: Defines an ordered list.
<li>: Defines a list item.
<dl>: Defines a description list.
<dt>: Defines a term/name in a description list.
<dd>: Defines a description of a term/name in a description list.

Images and Multimedia


<img>: Defines an image.
<audio>: Used to embed sound content in a document.
<video>: Used to embed video content in a document.
<source>: Specifies multiple media resources for media elements.
<figure>: Specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<figcaption>: Defines a caption for a <figure> element.

Table Content
<table>: Defines a table.
<tr>: Defines a row in a table.
<th>: Defines a header cell in a table.
<td>: Defines a cell in a table.
<caption>: Defines a table caption.
<thead>: Groups the header content in a table.
<tbody>: Groups the body content in a table.
<tfoot>: Groups the footer content in a table.
Forms and Input
<form>: Defines an HTML form for user input.
<input>: Defines an input control.
<textarea>: Defines a multiline input control (text area).
<button>: Defines a clickable button.
<select>: Defines a drop-down list.
<option>: Defines an option in a drop-down list.
<label>: Defines a label for an <input> element.
<fieldset>: Groups related elements in a form.
<legend>: Defines a caption for a <fieldset> element.
Semantic Sectioning Elements
<article>: Defines an article.
<section>: Defines a section in a document.
<nav>: Defines navigation links.
<aside>: Defines content aside from the page content.
<header>: Specifies a header for a document or section.
<footer>: Specifies a footer for a document or section.
<main>: Specifies the main content of a document.

Interactive Elements
<details>: Defines additional details that the user can view or hide.
<summary>: Defines a visible heading for a <details> element.
<dialog>: Defines a dialog box or window.

Embedded Content
<iframe>: Defines an inline frame.
<embed>: Defines a container for an external application.
<object>: Defines an embedded object.
<param>: Defines a parameter for an object.

SVG and Math


<svg>: Container for SVG graphics.
<math>: Container for MathML.
Scripting
<canvas>: Used to draw graphics, on the fly, via scripting (usually
JavaScript).
<noscript>: Defines an alternate content for users that have disabled
scripts in their browser.
Deprecated Elements (Avoid Using)
<center>: Deprecated. Use CSS instead.
<font>: Deprecated. Use CSS instead.
<strike>: Deprecated. Use <del> or <s> instead.

HTML headings are used to define the structure and hierarchy of a


document. They are also used to help search engines index a page's
content. There are six levels of headings in HTML, from <h1> to <h6>.
The highest level heading is <h1>, and the lowest level heading is <h6>.

Here are some key points about HTML headings:


 Headings are defined using the following tags: <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>.
 The level of the heading is determined by the tag name. For
example, <h1> is the highest level heading and <h6> is the lowest
level heading.
 Headings are typically used to organize the content of a page into
sections and subsections.
 Headings are also used to help users navigate a page. Users can
scan the headings to quickly find the information they are looking
for.
 Search engines use headings to index a page's content. This helps
users find the page when they search for specific topics.

Here are some additional tips for using HTML headings:


 Use only one <h1> tag per page.
 Use headings in a logical order, from <h1> to <h6>.
 Do not skip heading levels. For example, if you have a <h1>
heading, you should have at least one <h2> heading below it.
 Use descriptive headings that accurately reflect the content of the
section below them.
 Use headings to break up long blocks of text. This makes your
content easier to read and scan.
 Use headings to create a visual hierarchy. This helps users
understand the relationship between different sections of your
content.
Here is an example of how HTML headings can be used:
<h1>Introduction</h1>
<p>This section provides an overview of the topic of this article.</p>

<h2>Section 1: History of HTML</h2>


<p>This section discusses the history of HTML and how it has evolved
over time.</p>

<h2>Section 2: HTML Syntax</h2>


<p>This section explains the basic syntax of HTML, including tags,
attributes, and elements.</p>

<h2>Section 3: HTML Elements</h2>


<p>This section provides a comprehensive list of all the HTML
elements, along with their descriptions and usage.</p>

<h2>Section 4: HTML Attributes</h2>


<p>This section provides a comprehensive list of all the HTML
attributes, along with their descriptions and usage.</p>

<h2>Section 5: HTML Headings</h2>


<p>This section discusses the different levels of HTML headings and
how they are used.</p>

<h2>Section 6: HTML Paragraphs</h2>


<p>This section discusses how to use HTML paragraphs to format
text.</p>

<h2>Section 7: HTML Lists</h2>


<p>This section discusses how to use HTML lists to organize
content.</p>

<h2>Section 8: HTML Tables</h2>


<p>This section discusses how to use HTML tables to display data.</p>

<h2>Section 9: HTML Forms</h2>


<p>This section discusses how to use HTML forms to collect user
input.</p>
<h2>Section 10: HTML Images</h2>
<p>This section discusses how to add images to an HTML
document.</p>

<h2>Section 11: HTML Links</h2>


<p>This section discusses how to create links to other web pages and
resources.</p>

<h2>Section 12: HTML Styles</h2>


<p>This section discusses how to use CSS to style HTML
elements.</p>

<h2>Section 13: HTML Scripts</h2>


<p>This section discusses how to add JavaScript to an HTML
document.</p>

<h2>Conclusion</h2>
<p>This section summarizes the key points of the article and provides
some
SRC Attribute (Source)
 Purpose: Primarily used to specify the source of external
content.
 Common use cases:
o Images: <img src="image.jpg">
o Audio: <audio src="music.mp3">
o Video: <video src="video.mp4">
o Scripts: <script src="script.js"></script>
 Functionality: The src attribute tells the browser to load the
specified resource and embed it into the current HTML document.
 Key points:
o The value of the src attribute should be a URL that points to
the location of the resource.
o If the resource is located on the same server as the HTML
document, you can use a relative URL.
o If the resource is located on a different server, you must use
an absolute URL.
o The browser will load the resource asynchronously, meaning
that the rest of the page will continue to load while the
resource is being fetched.
HREF Attribute (Hypertext Reference)
 Purpose: Creates a link to another resource.
 Common use cases:
o Anchors within a page: <a href="#section2">Go to Section
2</a>
o Links to external pages: <a
href="https://example.com">Visit Example</com>
o Download links: <a href="file.pdf" download>Download
PDF</a>
 Functionality: The href attribute tells the browser to navigate to
the specified resource when the link is clicked.
 Key points:
o The value of the href attribute should be a URL that points
to the location of the resource.
o If the resource is located on the same server as the HTML
document, you can use a relative URL.
o If the resource is located on a different server, you must use
an absolute URL.
o The browser will load the linked resource in a new tab or
window by default, but you can change this behavior using
the target attribute.
Image Tag (IMG)
Purpose:
 Used to insert images into an HTML document.
Syntax:
HTML
<img src="image_url" alt="alternative text">
Attributes:
 src: Specifies the URL of the image.
 alt: Provides an alternative text description for the image, which is
used by screen readers and when the image cannot be loaded.
 width: Sets the width of the image in pixels.
 height: Sets the height of the image in pixels.
 title: Provides a tooltip that appears when the user hovers over the
image.
 style: Allows you to apply CSS styles to the image.

 The alt attribute is essential for accessibility and SEO. It helps


screen readers describe the image to visually impaired users and
also helps search engines understand the content of the image.
 If you don't specify the width and height attributes, the
image will be displayed at its original size.
 You can use CSS to style images, such as changing their border,
padding, and margin.

Best Practices:
 Use descriptive alt text that accurately describes the content of the
image.
 Optimize image files for web use by compressing them without
sacrificing quality.
 Consider using a responsive image technique like srcset and sizes
to provide different image sizes for different screen resolutions.
 Avoid using images as background elements, as they can impact
page load times.
 Use images sparingly and only when they add value to the content.

You might also like