HTML
Hypertext Markup Language, or HTML, is the computer language that structures the web pages
on the internet.
On top of HTML, you can build stunning web pages with buttons, images, and lots more.
HTML TAGS:
By adding the HTML code
BUTTON TAG:
<button>Like</button> you can create a button with the label “like”.
The HTML code to create a button uses an opening tag, <button>, and a closing tag </button>,
in this order.
The text between the opening and closing tags of a button becomes button’s label.
PARAGRAPH TAG:
In HTML, the keywords of some tags are obvious, but there are some tags that use a shortened
form.f for example, we use p for a paragraph.
Coding a paragraph is very similar to coding a button. Tou need an opening tag, followed by
your text, and a closing tag.
Code a paragraph that displays Mimo is Fun!.
<p>Mimo is Fun</p>
HEADINGS:
We can create headings in HTML to emphasize certain texts. There are 6 sizes of heading in
HTML, from h1 to h6.
Code a heading that displays Snapcat.
<h1>Snapcat</h1>
The heading tag emphasizes texts by making them bigger and bolder. H1 is the biggest and
boldest and h6 is the smallest and least bold.
STRUCTURING TEXT WITH TAGS:
Sometimes we want to format paragraphs with line breaks.
For example, this song would look much better if Raindrops on roses appeared on one line,
whiskers on kittens on the next, and so on.
We can separate lines with the help of the line break tag: br.
[Link]
<h1>My faborite things</h1>
<p> Raindrops on roses<br>Whiskers on kittens<br>Bright copper kettles<br>Warm woolen
mittens</p>
<br> is an empty tag. Empty tags have no closing tag and no content. They are also called self-
closing tags.
There’s an element for giving emphasis to text, it makes it italic. It’s called the em element. Add
<em> and </em>.
[Link]
<h1>My favorite things</h1>
<p>
Raindrops on <em>roses</em><br>Whiskers on kittens<br>
Bright copper kettles<br>Warm woolen mittens
</p>
To define texts as important, we use the <strong> and </strong> tags. It makes text bold.
[Link]
<h1>My favorite things</h1>
<P>
Raindrops on <em>roses</em><br>Whiskers on <strong>kittens</strong>
</p>
CREATING LINKS:
Let’s take a look at how links work to combine webpages into websites.
To start creating a link, we add the text in between the <a> and </a> tags. This won’t highlight
the text yet.
<a> stands for “anchor” tag.
[Link]
<a>Learn to code</a>
To link the text to a webpage, we add href=”” along with a Uniform Resource Locator (URL).
href is short for “hypertext reference”.
[Link]
<a href=”[Link] to code</a>
href is an attribute. All attributes have two things in common: they provide extra information
and they go inside the opening tag.
Attribute are added after the name of the tag, and before the > closing sign.
We link to a webpage by adding = after the attribute and a URL as a value in between quotes.
[Link]
<!doctype html>
<html>
<body>
<a href=” [Link] >Learn to code</a>
</body>
</html>
Question: what do links do?
Answer: link webpages to other webpages and websites.
Links not working without href attribute.
Question: what are attributes for?
Answer: To provide additional information about tags.
ADDING IMAGES:
HTML, also allows us to add images to a webpage.
To add images to webpage, we start with the <img> tag.
Just like <br>, <img> is an empty tag. That means it has no closing tag.
To display an image, an image tag need the src attribute. src stands for source.
[Link]
<h3>drawing of <em>Earthrises</em></h3>
<img src=”[Link]
We can use attributes to change the size of images. The width and height attributes use pixels
as the default unit of measurement.
For example, to set the width of this image as 100px, code width =”100”
[Link]
<img src=”[Link] width =”100” height =”200”>
And the height attribute adjusts the height of an image.
[Link]
<img src=”[Link] width=”200” height=”300”>
Questions:
1. What makes <img> an empty tag?
2. How can we adjust the height of image?
3. Which attribute do we need to set for the img tag?
Answers:
1. It has no closing tag.
2. With the height attribute.
3. The src attribute.
Boilerplate code:
Webpage Structure:
An element is what we call the opening tag, closing tag, and code in between.
To create a webpage, you’ll need an opening and closing HTML tag.
The html and body elements form the structure of a webpage. We place elements we want to
display inside of the body.
<body> and</body> defines the body of a webpage.
[Link]
<html>
<body>
</body>
</html>
We must place contents, such as headings, inside the body tags.
Display a heading on the webpage.
[Link]
<html>
<body>
<h1>Top Stories</h1>
</body>
</html>
Code the opening tag to display a button on the webpage.
[Link]
<html>
<body>
<button>Add to Cart</button>
</body>
</html>
Display a paragraph underneath the heading on the webpage.
[Link]
<html>
<body>
<h1>About Me</h1>
<p>I love to code</p>
</body>
</html>
Head, Title and Doctype:
The head HTML element, <head></head>, is a container for information about a webpage, like
its title. It goes before the body tag.
[Link]
<html>
<head>
</head>
<body>
<h1>My Favorite things</h1>
<p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </P>
</body>
</html>
The title of a webpage appears in the tab or window of the web browser.
To give a webpage a title, we add <title> and </title> inside the head tags.
Note that the title is not visible but it provides information to the browser.
[Link]
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>My favorite things</h1>
<p>Raindrops on <em>roses</em><br>Whiskers on <strong>kittens</strong></p>
</body>
</html>
The doctype tells the web browser what version of HTML we’re using. Without it, the browser
might not display the page correctly.
Since we’re using the latest version, we use <!doctype html>.
[Link]
<!doctype html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>My favorite things</h1>
<p> Raindrops on <em>roses</em><br>Whiskers on <strong>kittens</strong></p>
</body>
</html>
The doctype looks like an empty doctype tag with an empty html attribute: <!doctype html>.
Attributes provide additional information to tags. You’ll learn more about them in later
chapters. For now, put together the doctype.
Questions:
1. What’s the head tag for?
Answers: The <head> element contains metadata like the page’s title, character set,
stylesheets, and scripts, which describe the document’s properties and external resources
rather than its content. This information is crucial for browsers and search engines but isn’t
visible to the user on the page.
2. How can we define a webpage’s title so that it appears in the tab or window of the
web browser?
Answers: The <title> tag is essential for SEO and user experience, providing context for
browser tabs, bookmarks, and search engine results. It must be placed within the <head>
section of an HTML document.
3. What does the doctype, <!doctype html>, do?
Answers: The <!doctype html> declaration signals that the document is HTML5, ensuring
browers render pages in standards mode for consistent behavior across platforms. Omitting it
can cause browsers to use “quirks mode”, leading to unpredictable layout and styling.
4. what happens when there’s no doctype in a webpage?
Answers: The web browser has to guess the HTML version.
STYLESHEET AND BASIC SELECTORS
LINKING STYLESHEETS:
We’ll now move on to making great-looking websites with the help of a styling language called
CSS, short for Cascading Style Sheets.
To make larger webpages more manageable, we can move our CSS to style sheet, or a special
file just for styling the webpage.
[Link]
<!doctype html>
<html>
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Water Puns</h1>
<p> Why does water never laugh at jokes? It’s not a humor. </p>
</body>
</html>
[Link]
h1 {color: red;}
p {color: blue;}
To include a style sheet in an HTML file, we use the link element. <link> is a self-closing empty
element and it goes inside the head element.
[Link] [Link]
<!doctype html>
<html>
<head>
<link>
</head>
<body>
<h1>Water Puns</h1>
<p> Why does water never laugh at jokes? It’s
not a humor</p>
</body>
</html>
To know what kind of file to include, the opening link tag needs the rel attribute set using
rel=”stylesheet”.
[Link] [Link]
<!doctype html>
<html>
<head>
<link rel=”stylesheet”>
</head>
<body>
<h1>Water puns</h1>
<p>Why are rivers amazing roommates? They
go with the flow. </p>
</body>
</html>
To specify the style sheet’s location, set the href attribute to “[Link]”.
[Link] [Link]
<!doctype html>
<html>
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Water Puns</h1>
<p> Why are oceans so meticulous?<br> They
like to be pacific. </p>
</body>
</html>
Inside the CSS file, we specify which element to style with a tag selector. Select the p tag.
[Link] [Link]
<!doctype html> P
<html>
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Water Puns</h1>
<p>When does it start to rain money? When
there’s change in the weather. </p>
</body>
</html>
We then add an opening brace, { , followed by a closing brace, } .
[Link] [Link]
<!doctype html> P{
<html> }
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Water Puns</h1>
<p>When does it start to rain money? When
there’s change in the weather. </p>
</body>
</html>
Now, any declaration we add will apply to all p elements on the webpage. Add the color: blue;
declaration.
[Link] [Link]
<!doctype html> p{
<html> color: blue;
<head> }
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Water Puns</h1>
<p>When does it start to rain money? When
there’s change in the weather. </p>
</body>
</html>
When we add p { followed by color: blue; , and then } , we create a CSS rule.
[Link] [Link]
<!doctype html> P {color: blue;}
<html>
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Water Puns</h1>
<p>When does it start to rain money? When
there’s change in the weather. </p>
</body>
</html>
We can add other declarations like background-color: pink as long as they’re on another line.
[Link] [Link]
<!doctype html> p { color: blue;
<html> background-color: pink;}
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Water Puns</h1>
<p>When does it start to rain money? When
there’s change in the weather. </p>
</body>
</html>
Questions:
1. How can we style a website?
By adding CSS in a style sheet.
2. What happens when we style elements on webpage in an included style sheet?
Any changes to the style sheet become visible on the webpage.
3. How can we apply a style to an element?
By adding its name, braces, and the style changes in style sheet.
4. What does the href attribute do in this piece of code?
The href attribute specifies the URL of the external resource, enabling the link
element to locate and connect to the stylesheet. This is consistent across various
HTML elements that reference external files or destinations.
Element selectors:
If we want a style to apply to the entire page, we can use the body selector.
[Link] [Link]
<!doctype html> body {
<html> }
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>The Social Book</h1>
<p>Sign up with us</p>
</body>
</html>
Setting the background color to blue; inside the body rule sets the background for the entire
body.
[Link] [Link]
<!doctype html> body {
<html> background-color: blue;
<head> }
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>The Social Book</h1>
<p>Sign up with us</p>
</body>
</html>
Styles like color: white; when set inside the body rule will apply to all elements inside the body
tag.
[Link] [Link]
<!doctype html> body { background-color: blue;
<html> color: white; }
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>The Social Book</h1>
<p>Sign up with us</p>
</body>
</html>
We can style as many elements as we want as long as we add a space between different rules.
[Link] [Link]
<!doctype html> body { background-color: blue;
<html> color: white; }
<head> h1 {font-family: Helvetica; }
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>The Social Book</h1>
<p>Sign up with us</p>
</body>
</html>
Using the body tag is one of easiest ways to add overlapping rules on elements. We’ll learn
about the other ways soon.
[Link] Style .css
<!doctype html> body { background-color: cornSilk;}
<html> h1 {font-family: Helvetica;
<head> color: darkGray;}
<link rel=”stylesheet” href=”[Link]”> p {color: gray;
</head> font-weight: bold;
<body> font-family: cursive;}
<h1>Venn Diagram Generator</h1>
<p>Learn how to create your own personal
Venn Diagrams</p>
<img width=”250”
src=”[Link]
</body>
</html>
Questions:
1. Why do we want to style the body element?
To apply style to all elements inside the body element.
2. What happens when we change the background-color of the h1 element?
The background changes only for the h1 elements.
3. How many rules can we add to our CSS file?
As many as we want.
Class selectors:
If there are multiple elements of the same kind on a webpage, selectors like h1, h2, or p change
all of these elements.
[Link] [Link]
<!doctype html> h1 { font: “Arial”;
<html> color: green; }
<head> h2 { font: “Arial”;
<link rel=”stylesheet” href=”[Link]”> color: blue;}
</head> p { font: “Arial”;
<body> font-weight: normal;}
<h1>Not On Time Magazine</h1>
<p>Always first with the last</p>
<h2>Car Trends</h2>
<p>Coal powered cars. The future? </p>
<h2>Fashion Latest</h2>
<p>Flared jeans</p>
</body>
</html>
If we want to select one or more elements, we can set a class attribute for the exact elements
we want to change.
In the stylesheet, we can set a new class rule with a . followed by the name of the class. Like
here with .gray-element.
[Link] [Link]
<!doctype html> .gray-element{ background-color: lightgrey; }
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<ol> To Do: <li
class=”gray-element”>Floss</li>
<li>Feed Cat</li>
<li class=”gray-element”>Nap</li>
<li>Plan holiday</li>
<li class=”gray-element”>Order tea</li>
</ol>
</body>
</html>
The rules for the class will apply to all elements that have that class attribute in the html file.
Classes aren’t unique, so we can set the same class for multiple elements. Like here for
example, with class= “gray-element”.
[Link] [Link]
<!doctype html> .gray-element { background-color: lightgrey;}
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<ol> To Do: <li
class=”gray-element”>Floss</li>
<li>Feed Cat</li>
<li class=”gray-element”>Nap</li>
<li>Plan holiday</li>
<li class=”gray-element”>Order tea</li>
</ol>
</body>
</html>
Important note:
<ol> (Ordered List): Creates a list where items are typically marked with numbers (eg, 1,
2, 3) or letters (e.g. , A, B, C).\
<li> (List Item): Defines each item inside the <ol> (or <ul> for unordered) tag.
To set a class as a selector in CSS, add a period followed by the class name. In this case, it’s
.grayelement.
[Link] [Link]
<!doctype html> .gray-element { background-color: lightgray;}
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<ol> To Do: <li
class=”gray-element”>Floss</li>
<li>Feed Cat</li>
<li class=”gray-element”>Nap</li>
<li>Plan holiday</li>
<li class=”gray-element”>Order tea</li>
</ol>
</body>
</html>
Questions:
1. How do we apply a style to one or more, but not all elements on webpage?
With the class selector.
2. What forms a rule?
A selector and its properties form a CSS rule.
ID Selectors:
We’ve seen how we can use HTML tags and CSS classes to change the styles of groups of
elements.
Include the button tag selectors to make all buttons lightblue and the text class selector to
make the text italic.
[Link] [Link]
<!doctype html> button{background-color: lightblue;}
<html> .text{font-style: italic;}
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Find the Capital Letter</h1>
<button>x</button>
<button>x</button>
<button>x</button>
<button>X</button>
<button>x</button>
<button>x</button>
<button>x</button>
<button>x</button>
<p class=”text”>Click on the correct button!
</p>
</body>
</html>
If we want to style a specific element, we can include an id selector. Here, we only want to
select the button with the capital letter.
First, we need to identify the element in the html. To set an ID attribute, type id=””.
[Link] [Link]
<html> Button {background-color: lightblue;
<head> Font-weight: bold;
<link rel=”stylesheet” href=”[Link]”> }
</head> .text{ font-style: italic;}
<body>
<h1>Find the Capital Letter</h1>
<button>x</button>
<button>x</button>
<button>x</button>
<button id=””>X</button>
<button>x</button>
<button>x</button>
<button>x</button>
<button>x</button>
<p class=”text”>Click on the correct button!
</p>
</body>
</html>
After the = sign, set the value of the id, “capital-letter” in this case.
ID values should be unique within the HTML document. So, we must not include a second id
attribute with the same value.
[Link] [Link]
<html> Button{background-color: lightblue;
<head> Font-weight: bold;}
<link rel=”stylesheet” href=”[Link]”> .text{font-style: italic;}
</head>
<body>
<h1>Find the Capital Letter</h1>
<button>x</button>
<button>x</button>
<button>x</button>
<button id=”capital-letter”>X</button>
<button>x</button>
<button>x</button>
<button>x</button>
<button>x</button>
<p class=”text”>Click on the correct button!
</p>
</body>
</html>
Now that we have included the id in the HTML element, we are ready to use the id selector for
our styles.
To select the element by its id, we type # followed by the name of the id, like capital-letter
here.
[Link] [Link]
<html> Button{background-color: lightgrey;
<head> Font-weight: bold;}
<link rel=”stylesheet” href=”[Link]”> .text{font-style: italic;}
</head> #capital-letter{}
<body>
<h1>Find the Capital Letter</h1>
<button>x</button>
<button>x</button>
<button>x</button>
<button id=”capital-letter”>X</button>
<button>x</button>
<button>x</button>
<button>x</button>
<button>x</button>
<p class=”text”>Click on the correct button!
</p>
<p class=”text”>Game on!</p>
</body>
</html>
IDs will help us with JavaScript and we shouldn’t overuse them for styling. However, we can
apply styles as usual with the id selector.
Include the full rule for the #cpaital-letter id.
[Link] [Link]
<html> Button{ background-color: lightblue;
<head> Font-weight: bold;}
<link rel=”stylesheet” href=”[Link]”> .text{font-style: italic;}
</head> #capital-letter{color: blue;}
<body>
<h1>Find the Capital Letter</h1>
<button>x</button>
<button>x</button>
<button>x</button>
<button id=”capital-letter”>X</button>
<button>x</button>
<button>x</button>
<button>x</button>
<button>x</button>
<p class=”text”>Click on the correct button!
</p>
<p class=”text”>Game on!</p>
</body>
</html>
Questions:
1. What are IDs for?
IDs identify HTML unique elements.
2. How do we set an ID attribute in the html file?
By typing id in the opening tag.
3. How do we use an ID selector in a stylesheet?
#id-name .
4. Why do we say IDs are unique?
The uniqueness pf an ID ensures that it reliably identifies a single element,
preventing conflicts when styling with CSS or manipulating with JavaScript.
Duplicate IDs to unpredictable behavior and invalid HTML.
Styling text:
Font properties:
One of the most important pats of a website is the text. We can modify text in a lot of ways,
from the size to the style or thickness.
Let’s start by creating a rule to change the appearance of our paragraphs.
[Link] [Link]
<!doctype html> p{}
<html>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<p>Avatar</p>
</body>
</html>
To change how big text is, we use the font-size property.
[Link] [Link]
<!doctype html> P{ font-size: ;}
<html>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<p>Avatar</p>
</body>
</html>
We measure elements on a webpage with pixels. To specify a size, we add a number. Set the
font-size of the p element to 60 pixels. After the number, we follow with the shorthand for
pixels, px.
[Link] [Link]
[Link] P{ font-size: 60px;}
<!doctype html>
<html>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<p>Avatar</p>
</body>
</html>
To set the type of font for an element, start by adding the font-family property. There are all
kinds of possible values for font-family, from Times New Roman to Helvetica. Here, let’s use
Courier New.
[Link] [Link]
<!doctype html> P{font-size: 60px;
<html> Font-family: Courier New;}
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<p>Avatar</p>
</body>
</html>
To italicize the text of an element, we use the font-style property and set the value to italic.
To bold the text of an element, we use the font-weight property and set the value to bold.
[Link] [Link]
<!doctype html> P{font-size: 60px;
<html> Font-family: Courier New;
<link rel=”stylesheet” href=”[Link]”> Font-style: italic;
</head> Font-weight: bold;}
<body>
<p>Avatar</p>
</body>
</html>
Questions:
1. How do we change the size of text on a webpage?
With the font-size property.
2. What is the shorthand for pixels?
px.
3. Which property does the Arial value belong to?
Font-family.
4. What is the font-weight property for?
It sets the thickness of the text.
Setting Size And Borders:
When done right, websites give you the right information in a fast and easy way.
Let’s learn about one of the easiest ways to prioritize information: changing the size of
elements or adding borders.
To change the height of an element, we use the height property.
[Link] [Link]
<!doctype html> Img {height: 100px;}
<html>
<head>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h3>One theory of the Earth</h3>
<img src=”[Link]
</body>
</html>