Scribd
Upload
24 views

HTML Basics (@reboot13)

Uploaded by

IYAD SAWAF
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

HTML Basics (@reboot13)

Uploaded by

IYAD SAWAF
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

HTML

BASIC

@reboot13

www.w3schools.com
@reboot13
<!DOCTYPE html>
Defines the document type
Version Html 5

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

www.w3schools.com
@reboot13
<html>
Defines an HTML document

<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

www.w3schools.com
@reboot13
<title>
Defines a title for the document

<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

www.w3schools.com
@reboot13
<body>
The <body> element contains all the contents
of an HTML document, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.

<html>
<head>
<title>Title of the document</title>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

www.w3schools.com
@reboot13
<h1> to <h6>
Defines HTML headings

<html>
<head>
<title>Title of the document</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

www.w3schools.com
@reboot13
<p>
Defines a paragraph

<html>
<head>
<title>Title of the document</title>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

www.w3schools.com
@reboot13
<hr>
Defines a thematic change in the content

<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for
creating Web pages.</p>
<hr>
<p>CSS is a language that describes how HTML
elements are to be displayed on screen.</p>
</body>
</html>

www.w3schools.com
@reboot13
<!--...-->
Defines a comment
This code is not displayed on the webpage

<html>
<head>
<title>Title of the document</title>
</head>

<body>
<!--start of paragraph-->
<p>This is some text in a paragraph.</p>
</body>
</html>

www.w3schools.com
Forms and Input
@reboot13
<form>
Defines an HTML form for user input

<html>
<head><title>Form</title>
</head>
<body>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

www.w3schools.com
Forms and Input
@reboot13
<input>
Defines an input control

<html>
<head><title>Input</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br>
<input type="submit" value="Submit">
</form></body>
</html>

www.w3schools.com
Forms and Input
@reboot13
<textarea>
Defines a multiline input control (text area)

<html>
<head><title>Textarea</title>
</head>
<form action="/action_page.php">
<textarea rows="4" cols="50">
</textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>

www.w3schools.com
Forms and Input
@reboot13
<button>
Defines a clickable button

<html>
<head>
<form action="/action_page.php">
<textarea rows="4" cols="50">
</textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>

www.w3schools.com
Forms and Input
@reboot13
<select>
Defines a drop-down list

<html>
<head>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>

www.w3schools.com
Forms and Input
@reboot13
<label>
Defines a label for an <input> element

<html>
<head><title> Label</title>
</head>
<body>
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" value="male">
<br>
<label for="female">Female</label>
<input type="radio" name="gender" value="female">
<br>
<input type="submit" value="Submit">
</form></body>
</html>

www.w3schools.com
Frames
@reboot13
<iframe>
An inline frame is used to embed another document
within the current HTML document.

<html>
<head><title>ifarames</title>
</head>
<body>
<iframe src="https://github.com/reboot13-git"
title="Reboot13 Github"></iframe>
</body>
</html>

www.w3schools.com
Images
@reboot13
<img>
Defines an image

<html>
<head><title> images</title>
</head>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket"
width="500" height="600"></body>
Images

</html>

www.w3schools.com
Images
@reboot13
<map>
Defines a client-side image map

<html>
<head><title> Mapping Image</title>
</head>
<body>
<img src="workplace.jpg" alt="Workplace"
usemap="#workmap" Imageswidth="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">
</map></body>
</html>

www.w3schools.com
Images
@reboot13
<area>
Defines an area inside an image map

<html>
<head><title> Area</title>
</head>
<body>
<img src="workplace.jpg" usemap="#workmap">
<map name="workmap">
Images

<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">
</map></body>
</html>

www.w3schools.com
Images
@reboot13
<canvas>
Used to draw graphics, on the fly, via scripting (usually JavaScript)

<html>
<head><title>CANVAS</title>
</head>
<body>
<canvas id="myCanvas">
This is a Canvas
</canvas> Images

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
</body>
</html>

www.w3schools.com
Images
@reboot13
<svg>
Defines a container for SVG graphics

<html>
<head><title>SVG</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4"
Images
fill="yellow" />
</svg>
</body>
</html>

www.w3schools.com
Audio/Video
@reboot13
<audio>
Defines sound content

<html>
<head><title> Audio</title>
</head>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3"
Images
type="audio/mpeg">
</audio>
</body>
</html>

www.w3schools.com
Audio/Video
@reboot13
<source>
Defines multiple media resources for media elements
(<video>, <audio> and <picture>)

<html>
<head><title> Source</title>
</head>
<body>
<audio controls> Images
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

www.w3schools.com
Audio/Video
@reboot13
<video>
Defines a video or movie

<html>
<head><title> Video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4"
Images type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>

www.w3schools.com
Audio/Video
@reboot13
<track>
Defines text tracks for media elements (<video> and <audio>)

<html>
<head><title>Track</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles"
srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles"
srclang="no" label="Norwegian">
</video>
</body>
</html>

www.w3schools.com
Links
@reboot13
<a>
Defines a hyperlink

<html>
<head><title>HyperLink</title>
</head>
<body>
<a href="https://telegram.me/reboot13">
Contact me on Telegram</a>
</body>
</html>

www.w3schools.com
Links
@reboot13
<link>
Defines the relationship between a document and an
external resource (most used to link to style sheets)

<html>
<head><title>Link</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Your body content -->
</body>
</html>

www.w3schools.com
Links
@reboot13
<nav>
Defines navigation links

<html>
<head><title>Navigation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
<!--Your body content -->
</body>
</html>

www.w3schools.com
Lists
@reboot13
<ul>
Defines an unordered list

<html>
<head><title>Unordered List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

www.w3schools.com
Lists
@reboot13
<ol>
Defines an ordered list

<html>
<head><title>Ordered List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

www.w3schools.com
Lists
@reboot13
<li>
Defines a list item

<html>
<head><title>List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

www.w3schools.com
Tables
@reboot13
<table>
Defines a table

<html>
<head><title>Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>

www.w3schools.com
Tables
@reboot13
<th>
Defines a header cell in a table

<html>
<head><title>Table Header</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>

www.w3schools.com
Tables
@reboot13
<tr>
Defines a row in a table

<html>
<head><title>Table Row</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>

www.w3schools.com
Tables
@reboot13
<td>
Defines a cell in a table

<html>
<head><title>Table Data</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>

www.w3schools.com
Styles and Semantics
@reboot13
<style>
Defines style information for a document

<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

www.w3schools.com
Styles and Semantics
@reboot13
<div>
Defines a section in a document

<html>
<head><style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
} </style></head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

</body>
</html>

www.w3schools.com
Styles and Semantics
@reboot13
<span>
Defines a section in a document

<html>
<head>
<title> Span </title>
</head>
<body>
<p>Hello I am
<span style="color:blue">Reboot13</span></p>
</body>
</html>

www.w3schools.com
Styles and Semantics
@reboot13
<header>
Defines a header for a document or section

<html>
<head>
<title> Header </title>
</head>
<body>
<header>
<h1>HTML Basics</h1>
<p>Posted by Reboot13</p>
<p>Source W3C school</p>
</header>
</body>
</html>

www.w3schools.com
Styles and Semantics
@reboot13
<footer>
Defines a footer for a document or section

<html>
<head>
<title> Footer </title>
</head>
<body>
<header>
<h1>HTML Basics</h1>
<p>Posted by Reboot13</p>
<p>Source W3C school</p>
</header>
<footer>
<a href="mailto:[email protected]">
[email protected]</a></p>
</footer>
</body>
</html>

www.w3schools.com
Styles and Semantics
@reboot13
<section>
Defines a section in a document

<html>
<head>
<title> Section </title>
</head>
<body>
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature
(WWF) is an international organization working on
issues regarding the conservation, research and
restoration of the environment, formerly named the
World Wildlife Fund. WWF was founded in 1961.</p>
</section>
</body>
</html>

www.w3schools.com
Meta Info
@reboot13
<head>
Defines information about the document

<html>
<head>
<title> Section </title>
</head>
<body>
<!--Your Body Content-->
</body>
</html>

www.w3schools.com
Meta Info
@reboot13
<meta>
Defines metadata about an HTML document

<html>
<head>
<meta charset="UTF-8">
<meta name="description"
content="Free Web tutorials">
<meta name="keywords"
content="HTML, CSS, JavaScript">
<meta name="author" content="Reboot13">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title> Meta </title>
</head>
<body>
<!--Your Body Content-->
</body>
</html>

www.w3schools.com
Meta Info
@reboot13
<base>
Specifies the base URL/target for all relative URLs in a document

<html>
<head>
<base href="https://www.w3schools.com/"
target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24"
height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
<body>
<!--Your Body Content-->
</body>
</html>

www.w3schools.com
Programming
@reboot13
<script>
Defines a client-side script

<html>
<head>
<title> Script </title>
</head>
<body>
<h1>The script element</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello JavaScript!";
</script>
</body>
</html>

www.w3schools.com
Programming
@reboot13
<noscript>
Defines an alternate content for users that do not
support client-side scripts

<html>
<head>
<title> NoScript </title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support
JavaScript!</noscript></body>
</html>

www.w3schools.com
Programming
@reboot13
<embed>
Defines a container for an external
(non-HTML) application

<html>
<head>
<title> Embed </title>
</head>
<body>
<h1>The embed element</h1>

<embed type="image/jpg" src="pic_trulli.jpg"


width="300" height="200">
</body>
</html>

www.w3schools.com
Programming
@reboot13
<embed>
Defines a container for an external
(non-HTML) application

<html>
<head>
<title> Embed </title>
</head>
<body>
<h1>The embed element</h1>

<embed type="image/jpg" src="pic_trulli.jpg"


width="300" height="200">
</body>
</html>

www.w3schools.com
Reboot13

Telegram: https://telegram.me/reboot13

Youtube: https://youtube.com/krutikraut

Instagram: https://instagram.com/krutik013

Twitter: https://twitter.com/krutik013

Github: https://github.com/reboot13-git

https://telegram.me/World_codes

You might also like