A web page is a text file saved with a .html or htm file extension.
A web server looks for the file name 'index.html' to load as the root/home page
Html elements are made up of tags:
<tagname> Element content </tagname>
<!DOCTYPE html>
<html>
<head> <!-- Contains meta data or info about the document -->
<title>Page Title</title> <!-- Title will appear in the browser tab -->
</head>
<body>
<h1>This is an h1 heading</h1>
<p>This is a paragraph</p>
<p title="I am a tooltip">Hover over me to see tooltip</p>
<p>This is another paragraph <br> with a break</p>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<a href="https://www.w3schools.com">This is a link</a> <br>
<img src="https://robotron.neocities.org/car.jpg" alt="alternative text" width="104" height="142">
<br>
<button onclick="alert('Why did you clicked me??')">This is a button, click me!</button>
</body>
</html>That's all there is to it!
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
HTML Text Formatting Elements Tag Description <b> Defines <b>bold</b> text <em> Defines <em>emphasized</em> text <i> Defines <i>italic</i> text <small> Defines <small>smaller</small> text <strong> Defines <strong>important</strong> text <sub> Defines <sub>subscripted</sub> text <sup> Defines <sup>superscripted</sup> text <ins> Defines <ins>inserted</ins> text <del> Defines <del>deleted</del> text <mark> Defines <mark>marked/highlighted</mark> text HTML Computer Code Elements Tag Description <code> Defines programming code <kbd> Defines keyboard input <samp> Defines computer output <var> Defines a variable <pre> Defines preformatted text HTML Quotation and Citation Elements Tag Description <abbr title="spell out abbreviation"> Defines an abbreviation or acronym <address> Defines contact information for the author/owner of a document <bdo dir="rtl"> Defines the text direction, dir = rtl or ltr <blockquote cite="website.com"> Defines a section that is quoted from another source <cite> Defines the title of a work <q> Defines a short inline quotation, usually the browser encloses in quotes
<a href="url" target="_blank">link text</a>
The target attribute can have one of the following values:
The <base> element specifies the base URL and base (default) target for all relative URLs in a page:
Example<base href="https://www.w3schools.com/images/" target="_blank">
Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
| 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 |
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
| Name: | Bill Gates |
|---|---|
| Telephone: | 555 77 854 |
| Telephone: | 555 77 855 |
Note that tables can be styled with CSS
Tables can also contain other html elements such as images, lists and even tables can be inside one another!
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Note that lists can contain other html elements such as images, links and even other lists!
<iframe src="index.html" height="300" width="60%"></iframe> Hyper-Links can also have a target attribute with the value of an iframe's name attribute
<a href="https://www.w3.org/" target="myiframe1">Link will display in iframe</a>
<iframe src="index.html" height="300" width="60%" name="myiframe1"></iframe>
Note that some websites are blocked from displaying in an iframe
Forms consist of various html input elements
<input type="text" name="firstname" value="" placeholder="Enter first name">
<input type="password" name="passcode" value="" placeholder="password">
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car
</form>
<form>
<select name="cars">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>Only MP4, WebM, and Ogg video are supported by the HTML5 standard.
Only MP3, WAV, and Ogg audio are supported by the HTML5 standard.
<video width="320" height="320" controls muted autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Use an iframe:
Use the base url: https://www.youtube.com/embed/ followed by the youtube video id
The youtube video id can be found in the navigation bar usually after an equals "=" sign on the youtube video webpage
<iframe width="560" height="315" src="https://www.youtube.com/embed/nGjjusDj3CU"></iframe> You can adjust the url to configure the player to:
https://www.youtube.com/embed/nGjjusDj3CU?controls=0;autoplay=1;mute=1;playlist=nGjjusDj3CU&loop=1
<audio controls autoplay loop muted>
<source src="LandRover.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Note that autoplay may be blocked in chrome