HTML
1. The core web technology
HTML code controls the structure of a web page
HTML tags are used to add elements to a web page
Some examples of HTML tags are <button>, <img>, <table> and <p>
2. HTML CODE
Elements like buttons and paragraph text require container tags
Container tags consist of both opening < > and closing </> tags
You can use the Code Playground to write, run and test real HTML code
3. Headings
There are many advantages of using headings in your pages
You can use up to 6 levels of headings
Headings require container tags
Test code
<h1>The Best Restaurant</h1>
<p>Best food in the city</p>
<h2>Food Menu</h2>
<h3>Starters</h3>
<p>Small bites</p>
<button>Order now</button>
4. Images
Images can be linked or embedded in web pages
Images don’t require closing tags
The source (url) of the image is needed for the image to be found on the internet
Test codes
1.
<h1>Wild Animals</h1>
<p>The elephant</p>
<img src="[Link]">
<button>More</button>
2. Create one on your own
Weather Forecast - heading
Very sunny - paragraph
A respective image
A button
5. Comments and line breaks
Comments make your code easier to read and understand
The <!--...--> tag allows you to add comments to your code
The <br> tag is used to create line breaks
Test codes;
1.
<!--Menu section-->
<h2> Menu </h2>
<!--Menu options-->
<p>Sushi</p>
<p>Lasagna</p>
<p>Paella</p>
2.
<h1>Product name</h1>
<p>Product price</p>
<p>Info<br>Useful product</p>
6. Standards and Best Practices
HTML documents can be organized into head and body
The <body> tag ensures compatibility with all browsers
Indentation helps with readability and therefore collaboration
Test code;
<html>
<head>
<title>Title of the page</title>
<meta name="author" content="Anna">
</head>
<body>
<p>The content of the page</p>
</body>
</html>
7. Text & Semantic Formatting
You can use nesting to make the text bold, italic and underlined with the <b>,
<i> and <u> formatting tags
You can make your web pages more accessible with the use of <strong> and <em>
semantic formatting tags
Test Codes;
1. <p><b>Bold</b> text</p>
<p><i>Italic</i> text</p>
<p><u>Underlined</u> text</p>
2. <html>
<head>
<title>Title of the document</title>
<meta name="author" content="Anna">
</head>
<body>
<p>I'd like to be notified
by <strong>email</strong></p>
<p>I'd like to be notified
by <b>email</b></p>
</body>
</html>
3. <html>
<head>
<title>Title of the document</title>
<meta name="author" content="Anna">
</head>
<body>
<p>His favorite book
is the <em>Odyssey</em></p>
<p>His favorite book
is the <i>Odyssey</i></p>
</body>
</html>
8. Links
You can insert links in pages with the anchor <a> tag
The <a> tag can be nested inside text elements
The destination URL goes with href
Test code;
<html>
<head>
<title>Hyperlinks</title>
</head>
<body>
<p>Have a look at <a href='URL'>
Gift’s Portforlio</a></p>
</body>
</html>
9. Lists
Lists are made of list items <li>
You can add ordered <ol> and unordered <ul> lists to web pages
You can nest lists inside each other
Test Codes;
1. <html>
<head>
<title>Hyperlinks</title>
</head>
<body>
<ol>
<li>Fruits</li>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<li>Milk</li>
<li>Cheese</li>
</ol>
</body>
</html>
10. Attributes
You can add attributes to HTML elements to provide additional information
Some attributes are required for the element to function correctly
Attributes are always specified in the start tag
Test code;
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="url" width="300" alt=”Boy in a hat”>
<img src="url">
</body>
</html>
11. Menus & Navigation
Websites come in 2 different types: single- or multi-page
You can create navigation links as <a> tags within a <nav> tag
You can link to specific parts of a page by giving them an id attribute
Test Codes;
1. <html>
<head>
<title>Homepage Title</title>
</head>
<body>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
</body>
</html>
2. <html>
<head>
<title>Travel with us</title>
</head>
<body>
<nav>
<a href="#about">About</a>
<a href="#packages">Packages</a>
</nav>
<h2>Discover the world with us!</h2>
<p>At <b>Around the world </b>, we
believe that travel is one of
the greatest gifts life has to
offer. That's why we're
dedicated to making your journeys
as seamless and enjoyable as
possible.
Whether you're seeking adventure,
relaxation, or a combination of
both, we've got you covered.
With a wide range of destinations
and customizable travel packages,
you'll be able to create the trip
of a lifetime.
</p>
<p>Our team of experienced travel
consultants are passionate about
travel and will work with you
to design an itinerary that fits
your individual needs and budget.
So why wait? Book your next adventure
with <b>Around the world</b> today
and start creating memories that
will last a lifetime!
</p>
<h2 id="about">About us</h2>
<p>At <b>Around the world</b>, we are
a team of passionate travelers
dedicated to helping our clients
experience the world. With years of
experience in the travel industry,
our knowledgeable and experienced
staff will work with you to plan and
book your next journey.
</p>
<h2 id="packages">Packages</h2>
<ul>
<li>Adults</li>
<li>School groups</li>
<li>Students</li>
<li>Family</li>
<li>Corporate</li>
<li>Honeymoon</li>
</ul>
<a href="#top">Top of the page</a>
</body>
</html>
12. Forms
You can add forms to your web pages with the <form> container tag
Forms are made of <input> elements
You can label the different inputs in a form with the <label> container tag
Test Codes;
1. The most common form element is <input>. There are many forms of <input>
element, depending on the type attribute.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form>
<input type="text">
<input type="radio">
<input type="checkbox">
</form>
</body>
</html>
2. Connecting labels and inputs increases the hit area.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Choose your area of interest:</p>
<form>
<input type="checkbox" id="c1">
<label for="c1">Art</label><br>
<input type="checkbox" id="c2">
<label for="c2">Sports</label><br>
<input type="checkbox" id="c3">
<label for="c3">Tech</label>
</form>
</body>
</html>
3. The value attribute defines the value that is submitted when the input is selected.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Enter payment option</p>
<input type="radio" id="r1"
name="pay" value="cash">
<label for="r1">Cash</label>
<input type="radio" id="r2"
name="pay" value="card">
<label for="r2">Card</label>
</body>
</html>
13. Page Layout
<header>, <main> and <footer>...
can be used to create a 3-part page layout
are container tags
are nested inside the body
Test code;
<body>
<header>
<!--intro information-->
</header>
<main>
<!--main content-->
</main>
<footer>
<!--footer information-->
</footer>
</body>
14. The Style Attribute
use the style attribute to customize your web pages’...
colors
font sizes
alignments
borders
and more!
Test Codes;
1. <html>
<head>
<title>Page Title</title>
</head>
<body>
<p style="color:green; font-size:small">Some text</p>
</body>
</html>
2. <html>
<head>
<title>Page Title</title>
</head>
<body>
<button style="background-color:green;
large:font-size">Click me</button>
</body>
</html>
3. <html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 style="border:dotted">dotted</h2>
<h2 style="border:dashed">dashed</h2>
<h2 style="border:solid">solid</h2>
<h2 style="border:double">double</h2>
<h2 style="border:inset">inset</h2>
<h2 style="border:outset">outset</h2>
</body>
</html>
15. Inline and Block Elements
There are two types of HTML element: inline and block
Block-level elements always start on (and end with) a new line
Inline elements don’t start on a new line
Test Codes;
1. <html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Block-Level Elements</h2>
<!--Start on a new line-->
<h3 style="border:solid">Heading</h3>
<p style="border:solid">Paragraph</p>
<ul style="border:solid">
<li>List item A</li>
<li>List item B</li>
</ul>
<h2>Inline Elements</h2>
<!--Don't start on a new line-->
<p><b style="border:solid">
Bold</b> text</p>
<button style="border:solid">
Click me</button>
<label style="border:solid">
Label</label>
</body>
</html>
2. <html>
<head>
<title>Page Title</title>
</head>
<body>
<button>Button A</button>
<button>Button B</button><br>
<button>Button C</button><br>
<button>Button D</button><br>
<button>Button E</button>
</body>
</html>
16. Tables
Add tables to web pages with the <table> container tag
Add rows with the <tr> container tag
Add data cells with the <td> container tag
Add header cells with the <th> container tag
Test Codes;
1. <html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
<tr>
<td>C3</td>
<td>C4</td>
</tr>
</table>
</body>
</html>
2. Borders can be added to tables, rows and cells with
the style attribute.
Run the code to display the table
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table style="border:solid">
<tr>
<td style="border:solid">C1</td>
<td style="border:solid">C2</td>
</tr>
<tr>
<td style="border:solid">C3</td>
<td style="border:solid">C4</td>
</tr>
</table>
</body>
</html>
3. Run the code to display the table with the header
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Amy</td><td>38</td>
</tr>
<tr>
<td>Alex</td><td>29</td>
</tr>
</table>
</body>
</html>
4. You can make cells that take up multiple rows and/or columns, using
the attributes colspan and rowspan. This is called merging cells.
colspan is for the number of columns a cell should span.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table style="border:solid">
<tr>
<th style="border:solid">Month</th>
<th style="border:solid">
Budget($)</th>
</tr>
<tr>
<td style="border:solid">
January</td>
<td style="border:solid">
500</td>
</tr>
<tr>
<td style="border:solid">
February</td>
<td style="border:solid">400</td>
</tr>
<tr>
<td style="border:solid"
colspan="2">Sum: 900</td>
</tr>
</table>
</body>
</html>
5. The rowspan attribute specifies the number of rows a cell should span.
You can use rowspan to merge cells vertically.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table style="border:solid">
<tr>
<th style="border:solid">Month</th>
<th style="border:solid">Budget($)</th>
<th style="border:solid">Savings($)</th>
</tr>
<tr>
<td style="border:solid">January</td>
<td style="border:solid">500</td>
<td style="border:solid"
rowspan="2">150</td>
</tr>
<tr>
<td style="border:solid">February</td>
<td style="border:solid">400</td>
</tr>
</table>
</body>
</html>
17. Touch on Javascript
JavaScript makes your web pages interactive
The onclick attribute triggers actions when a user clicks on an
element
The alert() function generates a message with an OK button
Test Codes;
1. <html>
<head>
<title>Page Title</title>
</head>
<body>
<button
onclick="alert('Welcome to JS')">
Click me</button>
</body>
</html>
2. You can use JavaScript to make changes to HTML elements based on
users’ actions.
For example, this code changes the image when someone clicks the
button:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img id="robot"
src="[Link]
<button
onclick="[Link]='[Link]
Show tree</button>
</body>
</html>
3. The code below uses two buttons to change the
image displayed on the page.
Give it a try and make the robot dance
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img id="robot"
src="[Link]
[Link]"><br>
<button
onclick="[Link]='[Link]
urses/[Link]'">
Left</button>
<button
onclick="[Link]='[Link]
urses/[Link]'">
Right</button>
</body>
</html>
