Lesson – 2 ( HTML )
HTML stands for Hyper-Text Markup Language and it is used for creating webpages.
A web browser is designed to read HTML and then translate it into the things you
can see on the screen.
HTML Essentials:
1. There are chevrons < > around tags.
2. The four essential HTML features are DOCTYPE, html, head, and body. This is
what we call boilerplate code as every page has it.
• Most tags have a closing tag with a forward slash.
HTML Essentials
<!DOCTYPE html> is always the first line of an HTML file.
<html> tells the browser that we have used HTML to code the page.
<head> is meant for things that aren’t displayed in the main body of your page, like
the title.
<body> contains all the content you want to see displayed.
A closer Look at HTML Tag
Attributes provide additional information about the contents of an element. They appear on the opening tag
of the element and are made up of two parts: a name and a value, separated by an equals sign.
Lesson - 3 ( Heading and Paragraph )
• HTML has six "levels" of headings: <h1> is used for main headings, <h2> is used
for subheadings If there are further sections under the subheadings then the
element is used, and so on...
Lesson - 3 ( Heading and Paragraph )
Paragraph
To create a paragraph, surround the words that make up the paragraph with an
opening <p> tag and closing </p> tag.
By default, a browser will show each paragraph on a new line with some space
between it and any subsequent paragraphs.
Lesson - 3 ( Heading and Paragraph )
<b>
By enclosing words in the tags
<b> and </b> we can make
characters appear bold.
<i>
By enclosing words in the tags
<i> and </i> we can make
characters appear italic.
Lesson - 4 ( Lists )
Ordered List
<ol>
The ordered list is created with the <ol> element.
<li>
Each item in the list is placed between an openig
<li> tag and a closing <li> tag. (The listands for list item.)
Lesson - 4 ( Lists )
Unordered List
The unordered list is created with the <ul> element.
Each item in the list is placed between an opening <li> tag and a closing
</li> tag.
(The listands for list item.)
Lesson - 4 ( Lists )
Unordered List
The definition list is created with the <dl>
element and usually consists of a series of terms and their definitions.
Inside the <dl> element you will usually see pairs of <dt> and <dd> elements.
<dt>
This is used to contain the term being defined (the definition term).
<dd>
This is used to contain the definition.
Lesson - 1 ( Adding Image)
Accessibility
Accessibility refers to having ability to access something.
Users of IT systems can have a wide range of needs, conditions or disabilities.
<img>
To add an image into the page you need to use an <img> element. This is an empty
element (which means there is no closing tag). It must carry the following three
attributes:
Alt
This provides a text description of the image which describes the image if you cannot see it.
src
This tells the browser where it can find the image file. This will usually be a relative URL
pointing to an image on your own site or a link.
title
You can also use the title attribute with the <img> element to provide additional information
about the image. Most browsers will display the content of this attribute in a tootip when the
user hovers over the image.
Lesson - 1 ( Adding Image)
You may now be wondering how to resize your image if it is too big or small. There are attributes for
this. The width attribute lets you change how wide the image will be in pixels. If you change the
width, the height will scale proportionally. If you change the height and the width attributes then
you risk squashing the image.
Other image tips
When designing for the web we may want part of an image to be transparent. PNG and GIF images
have the ability to be transparent. When searching for images, you can put extra keywords such as
‘transparent’ or ‘PNG’ into your search query.
Lesson - 2 ( Adding Link )
HTML stands for HyperText Markup Language. The text is called ‘hypertext’ because it is text
extended to have the ability to be clicked on and linked to somewhere else.
Links are created using the <a> element. Users can click on anything between the opening <a> tag
and the closing </a> tag. You specify which page you want to link to using the href attribute.
Lesson - 2 ( Adding Link )
When you link to a different website, the value of the href attribute will be the full web
address for the site, which is known as an absolute URL.
Lesson - 2 ( Adding Link )
mailto:
To create a link that starts up the user's email program and addresses an email to a specified
email address, you use the <a> element. However, this time the value of the href attribute
starts with mailto: and is followed by the email address you want the email to be sent to.
CHAPTER - 3 - Intro to CSS
Lesson - 1 ( Intro to CSS )
CSS stands for Cascading Style Sheets. It is a language used to describe the presentation of a
document written in HTML. In simpler terms, CSS is what makes websites look beautiful and
appealing.
CSS allows web designers to apply various styles, such as colors, fonts, spacing, and layout,
to HTML elements. It gives them the power to control the appearance of different elements
on a webpage, making it easier to create visually pleasing and consistent designs across an
entire website.
CHAPTER - 3 - Intro to CSS
Some of the things CSS can do include:
1. Styling Text: With CSS, you can change the color, size, font style, and spacing of text on a
webpage. This helps to make the text more readable and attractive.
2. Formatting Layout: CSS enables you to control the placement and arrangement of elements on
a webpage. You can adjust the width, height, margins, and padding of elements to create a
well-organized layout
3. Adding Colors and Backgrounds: You can use CSS to apply different colors to elements,
including backgrounds. This allows you to give your webpage a unique and eye-catching look.
4. Creating Animations and Transitions: CSS also allows you to add animations and transitions to
elements. You can make elements move, fade in/out, or change their appearance when certain
actions or events occur.
CHAPTER - 3 - Intro to CSS
Some of the things CSS can do include:
5- Designing Responsive Websites: With CSS, you can make your website adapt to different
screen sizes and devices. This is known as responsive web design and ensures that your
site looks great on desktops, tablets, and mobile phones.
6- By combining HTML and CSS together, you can create visually appealing and dynamic
webpages. CSS provides endless possibilities for web designers to make their websites
visually engaging, user-friendly, and accessible.
# Remember, practice is key when learning CSS. The more you experiment and try different styles,
the better you'll become at using CSS to enhance your web design skills. So, get ready to dive into
the exciting world of CSS and start making your webpages look amazing!
CHAPTER - 3 - Intro to CSS
Ways to Use CSS
We will learn the different ways to use cascading style sheets in our code.
There are three ways to use them with HTML elements: Inline CSS, Internal CSS and External CSS.
We will discuss these three types in detail with examples.
1) Inline CSS
• Inline styles affect one HTML element only.
• Such styles can be applied using the style attribute.
• If there are multiple styles applied to an element, we must separate them with semicolons ( ; ).
Structure:
CHAPTER - 3 - Intro to CSS
Examples:
The following line brings a red colored paragraph on the page:
The following lines bring a bordered element with rounded borders on the page with a paragraph inside it:
The border-radius property brings roundness to the corners of the div element.
The font weight property makes the text bold. The higher the font-weight value, the thicker is the text of the
element.
CHAPTER - 3 - Intro to CSS
Challenge:
As an exercise, try to put a link on the page using the a tag that has the href
attribute set to one of your favorite websites.
Add the style attribute to set the text-decoration property to none. This will
remove the underline that earlier you could see under the link.
CHAPTER - 3 - Intro to CSS
2) Internal CSS
A style sheet is said to be internal if the CSS style rules are placed inside the style element. It is recommended
to put the style element in the head element of the HTML page.
The following code sets the background color of the body element to brown using Internal CSS.
Lesson 2 - Tables
Tables in HTML
Tables are an important part of designing and organizing information on a website. They allow us to display data in rows
and columns, making it easier for users to understand and navigate through the content.
In this lesson, we will explore what tables are and how to use them in HTML.
What is a Table?
A table is a way to represent data in a structured format using rows and columns. It consists of cells that are organized
into rows and columns to create a grid-like structure. Each cell can contain text, images, or other types of data. Tables are
commonly used for various purposes, such as displaying data, organizing information, and creating layouts. You may
have seen tables used to present data in a spreadsheet, schedules, or even seating arrangements.
Lesson 2 - Tables
Creating a Table in HTML
Lesson 2 - Tables
Lesson 2 - Tables
HTML provides several attributes that allow us to control the appearance of the table. We can add
attributes to the <table> , <th> and <td> elements to customize the table's style, size, and alignment.
Here are some commonly used attributes:
• border: Specifies the width of the table border.
• Cellpadding: Specifies the amount of space between the cell content and the cell border.
• Cellspacing: Specifies the amount of space between cells.
• align (for <table>): Specifies the alignment of the table.
• align ( for <th> and <td> ): Specifies the alignment of the content within the cell.
Lesson 2 - Tables
Conclusion
Tables are a powerful tool for organizing and presenting information in a structured format. They allow us to
display data in rows and columns, making it easier for users to understand and navigate through the content.
By using the <table> element and its associated elements, we can create tables in HTML and customize their
appearance.
Questions:
1. What is the purpose of using tables in HTML?
2. How do we create a table in HTML? Provide an example.
3. Explain the difference between <th> and <td> elements.
4. Can you customize the appearance of a table in HTML?How?
5. Why is it important to label the columns in a table?
