<html> - Root element<head> - Contains metadata about the document<title> - Sets the title of the page<body> - Contains the content of the page<h1> - Main heading<h2> - Subheading<h3> - Sub-Subheading<h4> - <h5> - <h6> - Additional Subheadings<p> - Paragraph<span> - Inline Text Container. The <span> tag in HTML is an inline container used to mark up a part of a text or a part of a document.<div> - Block Level Container. The <div> tag is used to group a heading and a paragraph together.<strong> - Bold Text<em> - Emphasized Text<u> - Underline Text<a> - Hyperlink. The <a> tag in HTML is used to create hyperlinks, which are clickable links that navigate the user to another webpage, file, or location within the same page.<img> - Image Element<ul> - Unordered Lists. Creates a list of items with no specific order. Items are typically displayed with bullet points.<ol> - Ordered Lists. Creates a list of items with a specific order. Items are typically displayed with numbers or letters.<li> - List Item. Represents an individual item within a list. Can be used inside both <ul> and <ol> tags.<table> - Table Element<tr> - Table Row<td> - Table Data Cell<th> - Table Header Cell<forms> - Form Element<input> - Input Field<textarea> - Text Area<select> - Dropdown Menu<button> - Button<video> - Video Element<audio> - Audio Element<header> - Header Section<nav> - Navigation Section<main> - Main Content Section<section> - Sectioning Element<article> - Article Element<aside> - Sidebar Element<footer> - Footer SectionThese are just some of the many HTML elements available. Each element has its own Attributes and usage guidelines
‣ Represents a structure or a component on a webpage.
‣ Consists of a start tag, content, and an end tag.
‣ Define the meaning and purpose of the content.
‣ Can have attributes, child elements, and text content.
‣ Examples:
- -<p>
- -<img>
- -<ul>
- -<table>
‣ The actual markup used to define an element.‣ Elements represents the structure, while tags are the markup.
‣ Consists of angle brackets(<and>) surrounding the element name.
‣ Come in pairs:
- -Opening tag (<tag>) and closing tag (</tag>)
‣ Surround the content and apply the element's meaning.
Examples:
- -<p>
- -</p>
- -<img src="image.jpg">
‣ Elements have content, attributes, and child elements, while tags surround the content.
‣ Elements define meaning while tags apply that meaning.
‣
<p>this is a paragraph</p>.‣
<p> and </p> are the tags.‣
<p> is the element (representing a paragraph).‣ "This is a paragraph" is the content.
‣ HTML elements define the structure and meaning.
‣ HTML tags are the markup used to apply that meaning.
While the terms are often used interchangeably, understanding the distinction helps
clarify the role of each in building web pages.
Heres an example:
p {
color: red;
font-size: 20px;
}
‣ Selector: p (This targets all <p> elements)
‣ Declarations: inside the curly braces {}, you have properties and values.
‣ color: red; (This sets the text color to red)
‣ font-size: 20px; (This sets the font size to 20 pixels)
‣ Element Selector: Targets all elements of a specific type.
h1 {
color: blue;
}
‣ Class Selector: Targets elements with a specific class attribute.
.myClass {
background-color: yellow;
}
‣ ID Selector: Targets a single element with a specific ID attribute.
#myId {
border: 1px solid black;
}
You can apply CSS in 3 ways:
‣ Inline CSS: Directly in the HTML Element.
<p style="color: red;">This is a red paragraph.</p>
‣ Internal CSS: Inside a <style> tag in the HTML <head>.
<head>
<style>
p {
color: red;
}
</style>
</head>
‣ External CSS: In a seperate .css file linked to HTML
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Here’s a simple example that combines these concepts:
<!DOCTYPE html>
<html7>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 class="header">Hello, World!</h1>
<p id="intro">Welcome to CSS basics.</p>
</body>
</html>
And the styles.css file:
.header {
color: blue;
text-align: center;
}
#intro {
color: green;
font-size: 18px;
}
This example sets the color of the header to blue and centers it,
while the paragraph with the ID intro is styled with green text and a font size of 18px.
- flour
_____ [an <li> is an element, which represents a list of items]
- suger
- baking powder
- salt
[after using <ul> for the list of items we use <ol>(ordered list) to keep the items in a specific order]
- in a bowl, mix all the dry ingredients
- in another bowl, mix the rest
<dt> tag, stands for definition term
<dd> tag, stands for definition description
<dl> tag, represents definition lists
The tags are simply placed side by side simply because thats how a definition list is structured
In summary, we now have three types of lists in HTML: unordered lists, ordered lists, and definition lists.
To attribute a quote we use <cite>
To distinguish a quote from the surrounding text we use <blockquote>
HTML Links: Links are created using the A element with an href attribute that specifies the URL.
Absolute URLs: These include the full URL, starting with HTTP or HTTPS, which stands for Hypertext Transport Protocol and Hypertext Transport Protocol Secure, respectively1.
Linking Elements: Links can be wrapped around text, images, or more complex elements like teaser cards2.
Security: Modern browsers automatically add HTTPS for security, but developers need to include it in their code.
-
We've gone from having 21 elements in HTML tags, that first document,
to having 100 more elements now, and yet its still the same language. i find it amazing.
It's still the same language that was created 25 years ago. It has grown an extra 100 elements in there,
and yet it's still the same language.
if you're familiar at all with computer formats, this is very surprising.
if you tried to open a Word processing document from the same time when
Tim Berners-Lee was creating the World Wide Web project, good luck.
You'd probably have to run some emulation just to get the thing open.
And yet you could open an HTML document from back then in browser today.
Jeremy Keith
We can include any element we want within the blockquote. The important thing is that
elements should be nested within each other in a way that makes sense.
-
Jeremy Keith said You could open an HTML document from back then in a browser today
Keith said You could open an HTML document from back then in a browser today
-
They
say you took my manhood,
momma
Come sit on my lap
and tell me,
what do you want me to say
to them, just
before I annihalate
their ignorance?
-
They
say you took my manhood,
momma
Come sit on my lap
and tell me,
what do you want me to say
to them, just
before I annihalate
their ignorance?
-
by e.e.cummings
it's
spring
and
the
goat-foot
balloonMan whistles
far
and
wee
Using <pre> allows spacing to be an integral part of the contents meaning
Using <pre> and <code> together
<ul>
<li>flour<li>
<li>sugar<li>
<li>salt<li>
</ul>
ul {
colour: teal;
}
li {
list-style-typ: square;
}
Subscripts, superscripts, and small text can be used where you need to mark up certain bits of content as having a different meaning than the rest.Subscripts are characters that are set below the normal baseline for text
H2O
Something that has a footnote.2
© 2019 Fancy Company
Subscript2
Superscript2
small text
<style>
.intro{
color:blue;
}
</style>
-This is the introduction
-This is the introduction
<style>
"
HTML Links: Links are created using the A element with an href attribute that specifies the URL.
Absolute URLs: These include the full URL, starting with HTTP or HTTPS, which stands for Hypertext Transport Protocol and Hypertext Transport Protocol Secure, respectively1.
Linking Elements: Links can be wrapped around text, images, or more complex elements like teaser cards2.
Security: Modern browsers automatically add HTTPS for security, but developers need to include it in their code.
Relative URLs: Useful for linking within the same site, allowing flexibility when moving between servers.
Absolute URLs: Include the full domain name, useful for linking to external sites.
File Structure: Understanding how files are organized is crucial for creating effective URLs.
Clean URLs: Using folders and index.html files can create user-friendly and well-structured URLs1.
logical URL paths.
Leverage Index Files: Use index.html files in folders to create clean URLs (e.g., /people instead of /people.html)2.
Avoid Absolute URLs: Absolute URLs can cause issues when moving the site between different servers.
the SRC tells the browser which image to use
the Alt attribute provides a text description of the image
Width and Height determines the size of the image
<!doctype html>
<style>
*--------------*
html{
Font-Family: Lora, Geogia, Seriff
Margin:2em
Font-size:!70%
Line-Height:1.5;
}
<img src="https//s3-us-west-2.amazonaws.com/s.cdpn.io/10558/maggie.jpg"
<alt="shiny black dog looking pensive" width="400" height="300"
</style>
Adding an image
WORKING WITH FORMS
<title>Document</title>
<style>
form input{width:30%}
</style>
Version A
Name
Email
Sign Up
Version B
Name
Email
Sign Up
Version C
Name
Email
Sign Up
Version D
Name
Email
Sign Up
https://youtu.be/YOb67OKw62s?si=vhVRI-RtIRywNI3f
.footer{
margin-top: 150px;
width: 100%;
padding: 100px 15%;
<h1>[Footer]</h1>
<!DOCTYPE html>
<title>Footer</title>
<style>
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
</style>
Get To Know Us
ReEcoWear
Refund & Return
Menu
<div class="footer-col">
<u><h4>Contact Us</h4></u>
<ul>
<li><p>Tel:<a href="tel:+27123456789">+27 123 456 789</a></p></li><br>
<li><p>Email:<a href="mailto:ReEcoWear@gmail.com">ReEcoWear@gmail.com</a></p></li><br>
<li><p><a href="//maps.google.com/?q=97 Durham Avenue, Salt River, Capetown, 7925">
97 Durham Avenue
Salt River
Capetown
7925</a></p>
</li>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="Social Links">
<a
href="https://www.facebook.com"
class="fa fa-facebook"></a>
<a
href="https://www.twitter.com" class="fa fa-twitter"></a>
<a
href="https://www.instagram.com" class="fa fa-instagram"></a>
<a
href="https://www.WhatsApp.com" class="fa fa-whatsapp"></a>
<a
href="https://www.fa-linkedin.com" class="fa fa-linkedin"></a>
</div>
</div>
</ul>
</div>
</div>
</footer>
background: #333;
color:aquamarine;
display: flex;
}
