Scribd
Upload
35 views

Basics of HTML and Css From Scratch PDF

This document provides an overview of the "Basics Of HTML & CSS from Scratch" course. It introduces HTML as the standard markup language used to structure web pages and describes the basic HTML document structure and common elements like headings, paragraphs, links, images, lists and tables. It also covers CSS for styling web pages, including properties for color, font, background, border, margin and padding. The document explains CSS selectors like element, class, ID, descendant and pseudo-class selectors for applying styles.

Uploaded by

ragupay321
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

Basics of HTML and Css From Scratch PDF

This document provides an overview of the "Basics Of HTML & CSS from Scratch" course. It introduces HTML as the standard markup language used to structure web pages and describes the basic HTML document structure and common elements like headings, paragraphs, links, images, lists and tables. It also covers CSS for styling web pages, including properties for color, font, background, border, margin and padding. The document explains CSS selectors like element, class, ID, descendant and pseudo-class selectors for applying styles.

Uploaded by

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

Basics Of HTML & CSS from Scratch

Learn the fundamentals of HTML and CSS from scratch

Get started
Overview
This coursewillteach you the basics of HTML and CSS, the building blocks of
web development. You will learn how to create web pages, style them using CSS,
and make them interactive with HTML.

01 Introduction

Introduction to HTML

01 Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language used for
creating web pages. It provides the structure and content of a webpage, allowing
developers to define and organize various elements on a page. This topic provides
an in-depth understanding of HTML, its key components, and how it is used to
create web pages.
1. HTML Basics
HTML is composed of tags, which are enclosed in angle brackets (< >). These
tags are used to define and format different elements on a webpage. Each HTML
document starts with the <!DOCTYPE> declaration, followed by the <html>
element that serves as the root for all other elements.

2. HTML Document Structure


An HTML document consists of several sections, including <head>, <body> , and
optional elements like <meta> and <title>. The <head> section contains
metadata about the document, such as the page title or CSS stylesheets.

3. HTML Elements
HTML has a wide range of elements that can be used to create different types of
content. Some commonly used elements include:

<h1>to:Headings
<h6> of different sizes.

<p>: Paragraphs of text.

<a>: Hyperlinks to other web pages or resources.

:Images to be displayed on the page.


<img>

<ul>and: Unordered
<ol> and ordered lists.

:Tabular data.
<table>

4. HTML Attributes
HTML elements can have attributes that provide additional information or modify
their behavior. Attributes are specified within the element's opening tag. For
example, the src attribute in the <img> element specifies the source of the
image to be displayed.

5. HTML Formatting
HTML allows for basic formatting of text through the use of tags such as <b> for
bold, <i> for italics, and <u> for underlining. These tags can be used to
emphasize or highlight specific parts of the content.

6. HTML Forms
HTML provides a set of elements for creating user input forms. These elements,
such as <input>, <select>, and <textarea>, allow users to enter data, make
selections, and submit information to web servers. Forms are essential for
interactive web applications and data collection.

7. HTML Semantic Markup


Semantic markup is the practice of using HTML elements that describe the
meaning or purpose of the content. Elements like <header>, <nav>, <section>,
<article>, and <footer> provide structural meaning to the content, making it
easier for search engines and assistive technologies to understand the page.

8. HTML Accessibility
Web accessibility is the practice of designing and developing web content that
can be accessed and used by people with disabilities. HTML includes features
and attributes that support accessibility, such as providing alternative text for
images using the alt attribute and using heading elements for proper document
structure.

9. HTML5 and Beyond


HTML5 introduced several new features and elements that enhance the
capabilities of web pages. These include the <canvas> element for drawing
graphics, the <video> and <audio> elements for embedding multimedia, and the
<svg> element for scalable vector graphics.

Conclusion Introduction to HTML

In conclusion, the Basics of HTML & CSS From Scratch


course provides a comprehensive introduction to HTML and
CSS. It covers the fundamentals of HTML, including basic
tags and elements, as well as the principles of CSS styling
and selectors. Students will gain a solid foundation in web
development and be able to create simple web pages using
HTML and CSS.
Basic HTML tags
and elements

02 Basic HTML tags and elements

HTML (Hypertext Markup Language) is the standard markup language for


creating web pages. It uses tags to define the structure and content of a web
page. Understanding the basic HTML tags and elements is essential for creating
and formatting the content on a webpage.

Headings
Headings are used to structure the content on a webpage and convey the
hierarchy of information. HTML provides six levels of headings, from <h1> to
<h6>, with <h1> being the highest level and <h6> the lowest.

Example:
<h1>This is a Heading level 1</h1>
<h2>This is a Heading level 2</h2>
<h3>This is a Heading level 3</h3>
...
<h6>This is a Heading level 6</h6>

Paragraphs
Paragraphs are used to separate blocks of text. HTML uses the <p> tag to define
paragraphs. Browsers automatically add spacing before and after paragraphs.

Example:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Links
Links allow users to navigate between webpages. The <a> (anchor) tag is used
to create links in HTML. The href attribute specifies the URL the link points to.

Example:

<a href="https://www.example.com">This is a link</a>

Images
Images enhance the visual appeal of a webpage. The <img> tag is used to
display images in HTML. The src attribute specifies the image URL, while the
alt attribute provides alternative text that is displayed if the image cannot be
loaded.

Example:

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

Lists
Lists are useful for presenting information in an organized manner. HTML provides
two types of lists: ordered lists (<ol>) and unordered lists (<ul>). Each list item is
defined using the <li> tag.

Example of an ordered list:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Example of an unordered list:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Tables
Tables are used to organize data into rows and columns. HTML uses the <table>
tag to define tables. Each row is defined with the <tr> tag, and each cell within a
row is defined using the <td> tag.

Example:

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Forms
Forms are used to collect user input. HTML provides various form elements, such
as text fields, checkboxes, radio buttons, and buttons. The <form> tag is used to
define a form, and form elements are defined within the form using appropriate
tags.

Example of a text field:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
Divisions
The <div> tag is a generic container that is used to group and style multiple
elements together. It allows for easier manipulation of blocks of content with CSS.

Example:

<div>
<h1>Title</h1>
<p>Paragraph text</p>
</div>

These are just a few of the basic HTML tags and elements that are used to create
web pages. Understanding and utilizing these tags correctly is a fundamental
requirement for developing web content. As you further explore HTML, you will
discover more tags and elements that enable you to create rich and interactive
web pages.

Conclusion Basic HTML tags and elements

To summarize, the Introduction to HTML topic in the Basics


of HTML & CSS From Scratch course provides an overview
of HTML and its importance in web development. It covers
the basic structure of an HTML document and introduces
essential tags and elements. By understanding the
fundamentals of HTML, students will be able to create well-
structured web pages.

CSS styling and selectors

03 CSS styling and selectors

CSS (Cascading Style Sheets) is a powerful language used for formatting and
presenting the visual aspects of a webpage. With CSS, you can control how your
HTML elements are displayed, including their layout, colors, fonts, and more. To
achieve this, CSS provides a wide range of styling properties and selectors.

Styling Properties
CSS offers a multitude of styling properties that allow you to customize the
appearance of HTML elements. Here are some commonly used properties:

Color :This property sets the color of the text content.

p{
color: blue; }

Font :You can use the font property to specify the font family, size, weight, and style.

h1 {
font-family: Arial, sans-serif; font-
size: 24px;
font-weight: bold;
font-style: italic;
}

Background :This property allows you to set a background color or image for an element.

body {
background-color: #F5F5F5;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: center;
}

Border :You can define the appearance of an element's border using the border property.

div {
border: 2px solid black;
border-radius: 10px;
}
Margin and Padding :These properties control the spacing around an element.

p{
margin: 10px;
padding: 10px; }

Selectors

Selectors are used in CSS to target specific HTML elements and apply styles to
them. There are several types of selectors available:

Element Selector :This selector matches all instances of a specific HTML element.

h1 {
color: red; }

Class Selector :A class selector matches elements with a specific class attribute.

.button {
background-color: blue; }

ID Selector :An ID selector targets elements with a specific ID attribute.

#header {
font-size: 20px; }

Descendant Selector :This selector targets elements that are descendants of another
element.
div p {
color: green; }

Pseudo-class Selector :Pseudo-classes are used to select elements based on a certain


state or condition.

a:hover {
color: purple; }

Attribute Selector :Attribute selectors target elements based on their attributes.

input[type="text"] {
border: 1px solid silver; }

Cascading and Specificity

CSS follows a set of rules to determine how conflicting styles for an element
should be applied. The cascade determines the priority of styles based on their
origin and specificity.

Cascade: CSS styles can originate from different sources like external style sheets,
internal styles, or inline styles. The cascade determines the order of precedence for
conflicting styles.
Specificity: Specificity is a value assigned to a selector that determines which style will
be applied when multiple styles target the same element.

Understanding the cascade and specificity is crucial when dealing with complex
stylesheets and conflicting rules.
Conclusion CSS styling and selectors

In conclusion, the Basic HTML tags and elements topic in the


Basics of HTML & CSS From Scratch course dives deeper
into the different tags and elements available in HTML. It
covers headings, paragraphs, lists, links, images, and tables,
allowing students to enhance the content and structure of
their web pages. By mastering these basic HTML tags and
elements, students will have the necessary skills to create
visually appealing and user-friendly websites.

Practical Exercises
Let's put your knowledge into practice
04 Practical Exercises

In the this lesson, we'll put theory into practice through hands-on activities. Click
on the items below to check each exercise and develop practical skills that will
help you succeed in the subject.

Creating Your First HTML Page

In this exercise, you will create a basic HTML page from scratch. You will
learn how to set up the HTML structure, add the DOCTYPE declaration,
and include the necessary HTML tags.

Creating a Simple Web Form

In this exercise, you will create a simple web form using HTML. You will
learn about different form elements such as input fields, checkboxes, and
radio buttons. Additionally, you will explore how to use labels and submit
buttons.
Styling an HTML Page with CSS

In this exercise, you will apply CSS styling to an HTML page. You will learn
how to use CSS selectors to target specific HTML elements and modify
their appearance. Additionally, you will explore different CSS properties to
change colors, fonts, and layout.

Wrap-up
Let's review what we have just seen so far

05 Wrap-up
In conclusion, the Basics of HTML & CSS From Scratch course provides a
comprehensive introduction to HTML and CSS. It covers the fundamentals of
HTML, including basic tags and elements, as well as the principles of CSS
styling and selectors. Students will gain a solid foundation in web development
and be able to create simple web pages using HTML and CSS.

To summarize, the Introduction to HTML topic in the Basics of HTML & CSS
From Scratch course provides an overview of HTML and its importance in web
development. It covers the basic structure of an HTML document and introduces
essential tags and elements. By understanding the fundamentals of HTML,
students will be able to create well-structured web pages.

In conclusion, the Basic HTML tags and elements topic in the Basics of HTML &
CSS From Scratch course dives deeper into the different tags and elements
available in HTML. It covers headings, paragraphs, lists, links, images, and
tables, allowing students to enhance the content and structure of their web
pages. By mastering these basic HTML tags and elements, students will have
the necessary skills to create visually appealing and user-friendly websites.

To summarize, the CSS styling and selectors topic in the Basics of HTML & CSS
From Scratch course explores the power of CSS in web design. It covers various
CSS selectors, properties, and values that enable students to customize the
appearance of their HTML elements. By understanding CSS styling and
selectors, students will have the ability to create visually engaging and
responsive web pages.
Submit

Conclusion

Congratulations!
Congratulations on completingthiscourse! Youhave taken an important step in
unlocking your full potential. Completing this course is not just about acquiring
knowledge; it's about putting that knowledge into practice and making a positive
impact on the world around you.

Share this course

Copyright @ 2023 - Html_Css_Codings


v0.5.63

You might also like