Notes on Web Design:
Web design refers to the process of creating and designing websites. It involves various aspects
such as layout design, graphic design, content creation, and user experience. Web design plays a
crucial role in shaping the overall look, feel, and functionality of a website. Here are some key
points regarding web design:
Advantages of Web Design:
1. Enhanced User Experience: Web design focuses on creating user-friendly interfaces,
optimizing navigation, and ensuring smooth functionality, leading to a positive user experience.
2. Increased Credibility and Trust: Well-designed websites with professional aesthetics and
intuitive user interfaces tend to instill trust and credibility in visitors.
3. Branding and Consistency: Effective web design helps establish a strong brand identity by
maintaining consistency in visual elements, colors, and typography.
4. Better Accessibility: Web design ensures that websites are accessible to a wider audience,
including individuals with disabilities, by implementing features like alt tags, proper contrast,
and responsive design.
5. Search Engine Optimization (SEO): Well-structured web design practices can contribute to
improved search engine rankings, making websites more discoverable.
Disadvantages of Web Design:
1. Time and Cost: Developing a high-quality, custom-designed website can be time-consuming
and expensive, especially for complex projects.
2. Technological Challenges: Web design requires keeping up with evolving technologies,
browsers, and devices, which can be challenging and time-intensive.
3. Maintenance and Updates: Websites need regular maintenance, updates, and bug fixes to
ensure smooth functioning, which can add to the overall cost and effort.
Uses of Web Design in Daily Lives:
1. Information and Communication: Websites are widely used as platforms to share information,
communicate ideas, and connect people across the globe.
2. E-commerce: Web design plays a crucial role in creating intuitive and visually appealing
online stores for buying and selling products and services.
3. Education and E-learning: Web design is essential for creating interactive and engaging e-
learning platforms, online courses, and educational resources.
4. Entertainment and Media: Websites serve as platforms for streaming videos, sharing music,
playing games, and accessing news and entertainment content.
Abbreviations in Web Design:
1. UI: User Interface
2. UX: User Experience
3. CSS: Cascading Style Sheets
4. HTML: Hypertext Markup Language
5. CMS: Content Management System
6. SEO: Search Engine Optimization
7. SSL: Secure Sockets Layer
Examples of Websites:
1. Amazon (e-commerce)
2. Airbnb (hospitality and travel)
3. Spotify (music streaming)
4. Khan Academy (education)
5. Netflix (entertainment and media)
6. Apple (technology and products)
7. Behance (creative portfolios)
8. BBC News (media and news)
9. TED Talks (inspirational talks)
10. Pinterest (visual inspiration and sharing)
introduction to HTML
HTML stands for HyperText Markup Language. It is the standard
language used to create web pages. HTML is the backbone of all
websites and describes the structure of web pages using various
tags.
HTML documents are made up of tags that are enclosed in angle
brackets. Tags are used to define different elements of a web page
such as headings, paragraphs, images, links, forms, and more. Here
are some examples of commonly used tags in HTML:
<html>: This tag defines the beginning and end of an HTML
document.
<head>: This tag contains information about the web page such
as the title, meta tags, and links to external files.
<body>: This tag contains the content of the web page such as
text, images, and links.
<h1> to <h6>: These tags are used to define headings of
different sizes. <h1> is the largest size while <h6> is the
smallest.
<p>: This tag is used to define paragraphs.
<img>: This tag is used to insert images into a web page.
<a>: This tag is used to create links to other web pages or files.
<form>: This tag is used to create forms that allow users to
input data.
Here is an example of a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is my first web page</p>
<img src="image.jpg" alt="My Image">
<a href="http://www.google.com">Visit Google</a>
</body>
</html>
This HTML code creates a web page with a title, a heading, a
paragraph, an image, and a link to Google.
Sure, here are some examples of HTML code that
can be used to create different elements on a web
page:
Creating Headings
HTML provides six different heading tags, from <h1> to <h6>, that
can be used to define headings of different sizes. Here's an
example:
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
Creating Paragraphs
The <p> tag is used to define paragraphs in HTML. Here's an
example:
<p>This is a paragraph. It contains some text that will
be displayed on the web page.</p>
Creating Links
The <a> tag is used to create links to other web pages or files.
Here's an example:
<a href="http://www.google.com">Visit Google</a>
Adding Images
The <img> tag is used to insert images into a web page. Here's an
example:
<img src="image.jpg" alt="My Image">
Creating Lists
HTML provides two types of lists: ordered lists (<ol>) and unordered
lists (<ul>). Here's an example of an unordered list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Creating Tables
HTML provides a <table> tag to create tables on a web page. Here's
an example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
These are just a few examples of what can be done with HTML. I
hope this helps!
HTML Styles
The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.
Example
I am Red
I am Blue
I am Big
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
You will learn more about CSS later in this tutorial.
Background Color
The CSS background-color property defines the background color for an HTML
element.
Example
Set the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Example
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML
element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Chapter Summary
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
HTML Exercises
Test Yourself With Exercises
Exercise:
Use the correct HTML attribute, and CSS, to set the color of the paragraph to "blue".
<p =" ;">This is a paragraph.</p>
TABLES
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: A table cell can contain all sorts of HTML elements: text, images, lists,
links, other tables, etc.
ADVERTISEMENT
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you like in a table; just make sure that the
number of cells are the same in each row.
Note: There are times when a row can have less or more cells than another.
You will learn about that in a later chapter.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use
the <th> tag instead of the <td> tag:
th stands for table header.
Example
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
By default, the text in <th> elements are bold and centered, but you can change
that with CSS.
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".
<table>
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
Submit Answer »
Start the Exercise
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Table Borders
HTML tables can have borders of different styles and shapes.
How To Add a Border
To add a border, use the CSS border property on table, th, and td elements:
Example
table, th, td {
border: 1px solid black;
}
Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse.
This will make the borders collapse into a single border:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style Table Borders
If you set a background color of each cell, and give the border a white color (the
same as the document background), you get the impression of an invisible
border:
Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
Round Table Borders
With the border-radius property, the borders get rounded corners:
Example
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Skip the border around the table by leaving out table from the css selector:
Example
th, td {
border: 1px solid black;
border-radius: 10px;
}
Dotted Table Borders
With the border-style property, you can set the appearance of the border.
The following values are allowed:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
Example
th, td {
border-style: dotted;
}
Border Color
With the border-color property, you can set the color of the border.
Example
th, td {
border-color: #96D4D4;
}
HTML Table Sizes
❮ PreviousNext ❯
HTML tables can have different sizes for each column, row or the entire
table.
Use the style attribute with the width or height properties to specify the
size of a table, row or column.
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
Example
Set the width of the table to 100%:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
Note: Using a percentage as the size unit for a width means how wide will this
element be compared to its parent element, which in this case is
the <body> element.
HTML Table Column Width
To set the size of a specific column, add the style attribute on
a <th> or <td> element:
Example
Set the width of the first column to 70%:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
ADVERTISEMENT
HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row
element:
Example
Set the height of the second row to 200 pixels:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
HTML Exercises
Test Yourself With Exercises
Exercise:
Use CSS styles to make the table 300 pixels wide.
<table >
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
HTML Table Headers
❮ PreviousNext ❯
HTML tables can have headers for each column or row, or for many
columns/rows.
TOBIAS LINUS
EMIL
8:00
9:00
10:00
11:00
12:00
13:00
MON TUE WED THU FRI
8:00
9:00
10:00
11:00
12:00
DECEMBER
HTML Table Headers
Table headers are defined with th elements. Each th element represents a table
cell.
Example
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
Vertical Table Headers
To use the first column as table headers, define the first cell in each row as
a <th> element:
Example
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Try it Yourself »
ADVERTISEMENT
Align Table Headers
By default, table headers are bold and centered:
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
To left-align the table headers, use the CSS text-align property:
Example
th {
text-align: left;
}
Try it Yourself »
Header for Multiple Columns
You can have a header that spans over two or more columns.
Name Age
Jill Smith 50
Eve Jackson 94
To do this, use the colspan attribute on the <th> element:
Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »
You will learn more about colspan and rowspan in the Table colspan &
rowspan chapter.
Table Caption
You can add a caption that serves as a heading for the entire table.
Monthly savings
Month Savings
January $100
February $50
To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Try it Yourself »
Note: The <caption> tag should be inserted immediately after the <table> tag.
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a table caption that says "Names".
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Submit Answer »
Start the Exercise
