Xlrays online web tutorials

Xlrays
Online Web Tutorials
Developed By: Yogesh Gupta
www.xlrays.com/xl
Xlrays

Index.html (Home Page)
<html>
<head>
<link rel="icon" href="Images/XLrays-logo.png">
<title>XLrays Online Web Tutorials</title>
<style>
#header {
height:120px;
}
#nav {
background-color:#eeeeee;
border: 1px solid #dddddd;
width:200px;
height:100%;
float:left;
padding:5px;
}
#section {
float:left;
padding:10px;
padding:50px;
}
#section.right {
float:left;
padding:5px;
padding:50px;
}

#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
body {
font-family:"Courier New", Courier, monospace;
}
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-large}
.style9 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100px;
text-shadow: 3px 3px 5px #4CAF50;
}
.style9:hover {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px #4CAF50, 0 0 5px green;
}
.style12 {color: #444444}
/* top nav bar */
ul.top {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #dddddd;
background-color: #eeeeee;
}
li.top {
float: right;
}
li a.top {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Xlrays

li a:hover:not(#tactive) {
background-color: #555;
}
li a.tactive {
color: white;
background-color: #4CAF50;
}
/* end top nav bar */
.style13 {font-family: "Courier New", Courier, monospace; font-size: 57px;
text-shadow: 3px 3px 5px #4CAF50;
}
.style13:hover {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px #4CAF50, 0 0 5px green;
}
/* left nav bar */
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
}
li a.nav {
display: block;
color: #000;
padding: 8px 0 8px 16px;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(#active) {
background-color: #555;
color: white;
}
/* end left nav bar */
HTMLTutorials

/* button */
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
border-radius: 15px 50px;
box-shadow: 0px 0px 50px #4CAF50;
}
.button:hover {
box-shadow: 0 12px 16px 0 #4caf50,0 17px 50px 0 #4caf50;
}
/* box */
div.box {
width: 380px;
padding: 0px;
border: 0px solid #eeeeee;
margin: 0px;
}
div.box:hover {
}

div.inner {
background-color: white;
padding:10px;
border-left-style:solid;
border-left-color:#4CAF50;
border-right-style:solid;
border-right-color:#4CAF50;
}
div.inner:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.style14 {color: #0000FF}
.style18 {color: #CC0000}
a:link{
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img:hover {
}
</style>
</head>
<body>
<div id="header">
<a href="Index.html">
<img src="Images/XLrays-logo.png" width="120" height="120" hspace="50" align="left" ></a>
<h3 class="style13">Online Web Tutorials</h3>
<ul class="top">
<li class="top">         </li>
<li class="top"><a class="top" href="i editor.html" target="_blank">Online Editor</a></li>
<li class="top"><a class="top" href="home.html">Html</a></li>
<li class="top"><a class="top tactive" href="Index.html">Home</a></li>
</ul>
</div>

<div id="nav">
<h2><center>HTML Tutorial</center></h2>
<ul class="nav">
<li><a class="nav" href="i editor.html" target="_blank"><b>Online Editor</b></a></li>
<li><a class="nav" href="home.html">HTML Home</a></li>
<li><a class="nav" href="introduction.html">HTML Introduction</a></li>
<li><a class="nav" href="html-editors.html">HTML Editors</a></li>
<li><a class="nav" href="basic.html">HTML BASIC</a></li>
<li><a class="nav" href="elements.html">HTML Elements</a></li>
<li><a class="nav" href="attributes.html">HTML Attributes</a></li>
<li><a class="nav" href="links.html">HTML Links</a></li>
</ul>
</ul>
</div>

<div class="style12" id="section">
<p align="center"><span class="style9">HTML</span><br>
</p>
<p class="style1" align="center">The language for building<br>
web pages</p>
<p><center><a href="home.html" style="color:white">
<button class="button button">Learn HTML</button></a></center></p>
</div>
<br><br><br><br> <div id="section" class="right box">
<h3><b> HTML Example:</b></h3>
<div class="inner">
<p> <span class="style14"><</span><span class="style18">html</span><span class="style14">></span><br>
<span class="style14"><</span><span class="style18">head</span><span class="style14">></span><br>
<span class="style14"><</span><span class="style18">title</span><span class="style14">></span>HTML Tutorial<span
class="style14"><</span><span class="style18">/title</span><span class="style14">></span><br>
<span class="style14"><</span><span class="style18">/head</span><span class="style14">></span> <br>
<span class="style14"><</span><span class="style18">body</span><span class="style14">></span>
<p><span class="style14"><</span><span class="style18">h1</span><span class="style14">></span>This is a heading<span
class="style14"><</span><span class="style18">/h1</span><span class="style14">></span><br>
<span class="style14"><</span><span class="style18">p</span><span class="style14">></span>This is a paragraph.<span
class="style14"><</span><span class="style18">/p</span><span class="style14">></span></p>
<p><span class="style14"><</span><span class="style18">/body</span><span class="style14">></span><br>
<span class="style14"><</span><span class="style18">/html</span><span class="style14">></span><br>
</p>
</p>
</div>
<a href="i editor-home.html" target="_blank" style="color:white"><button class="button button">Try it Yourself</button></a>
</div>

<div id="footer">
© 2016 All Right Reserved | XLrays.com.
</div>
</body>
</html>

home.html
<h1>HTML(5) Tutorial</h1>
<p><a href="index.html" style="color:#4CAF50"><h3><strong><< XLrays Home</strong></h3></a></p>
<img src="Images/pic_html5.gif" valign="middle" align="left">
<p>With HTML you can create your own Web site.<p>
<p>This tutorial teaches you everything about HTML.<p>
<p>HTML is easy to learn - You will enjoy it.</p><br><br>
<hr color="#eeeeee">
<h2>Examples in Every Chapter</h2>
<p>This HTML tutorial contains hundreds of HTML examples.</p>
<p>With our online HTML editor, you can edit the HTML, and click on a button to view the result.</p>
<div class="box">
<h3>Example</h3>
<div class="inner">
<p> <span class="style17"><</span><span class="style18 style16">html</span><span class="style17">></span><br>
<span class="style17"><</span><span class="style18">head</span><span class="style17">></span><br>
<span class="style17"><</span><span class="style18">title</span><span class="style17">></span>Page Title <span
class="style17"><</span><span class="style18">/title</span><span class="style17">></span><br>
<span class="style17"><</span><span class="style18">/head</span><span class="style17">></span> <br>
<span class="style17"><</span><span class="style18">body</span><span class="style17">></span>
<p><span class="style17"><</span><span class="style18">h1</span><span class="style17">></span>My First Heading<span
class="style17"><</span><span class="style18">/h1</span><span class="style17">></span><br>
<span class="style17"><</span><span class="style18">p</span><span class="style17">></span>My First Paragraph.<span
class="style17"><</span><span class="style18">/p</span><span class="style17">></span></p>
<p><span class="style17"><</span><span class="style18">/body</span><span class="style17">></span><br>
<span class="style17"><</span><span class="style18">/html</span><span class="style17">></span><br>
</p>
</p>
</div>
<a href="i editor-intro.html" target="_blank" style="color:white"><button class="button button">Try it Yourself</button></a>
</div>
<p style="border-style:solid; border-width:thin; border-color:#cccccc; border-spacing:50px; padding: 10px; width:800px" ><img src="Images/lamp.jpg"
align="middle"> Click on the "Try it Yourself" button to see how it works.</p>
<a href="introduction.html" style="color:#4CAF50"><b>Start learning HTML now!</b></a><strong>
<h3 align="right"><a href="introduction.html" style="color:#4CAF50">Next Chapter >></h3></strong></a></p>
</div>

<div id="section">
<h1>HTML Introduction</h1>
<p><a href="home.html" style="color:#4CAF50" ><h3><strong><< Previous
Chapter</strong></h3></a></p>
<hr width="100%" color="#eeeeee">
<h2>What is HTML?</h2>
<p>HTML is a <strong>markup</strong> language
for <strong>describing</strong> web documents (web pages).</p>
<ul>
<li>HTML stands
for <strong>H</strong>yper <strong>T</strong>ext <strong>M</strong>arkup&
nbsp;<strong>L</strong>anguage</li>
<li>A markup language is a set of <strong>markup tags</strong></li>
<li>HTML documents are described by <strong>HTML tags</strong></li>
<li>Each HTML tag <strong>describes</strong> different document content</li>
</ul>
introduction.html

<h2>HTML Example</h2>
<div class="box">
<h3>A small HTML document:</h3>
<div class="inner">
<p> <span class="style14"><</span><span class="style18">html</span>
<span class="style14">></span><br> <span class="style14"><</span>
<span class="style18">head</span><span class="style14">></span><br>
<span class="style14"><</span><span class="style18">title</span>
<span class="style14">></span>Page Title <span class="style14"><
</span><span class="style18">/title</span><span class="style14">>
</span><br> <span class="style14"><</span><span class="style18">
/head</span><span class="style14">></span> <br> <span class="style14">
<</span><span class="style18">body</span><span class="style14">></span>
<p><span class="style14"><</span><span class="style18">h1</span>
<span class="style14">></span>My First Heading<span class="style14">
<</span><span class="style18">/h1</span><span class="style14">></span><br>
<span class="style14"><</span><span class="style18">p</span><span class="style14">
></span>My First Paragraph.<span class="style14"><</span><span class="style18">
/p</span><span class="style14">></span></p>
<p><span class="style14"><</span><span class="style18">/body</span>
<span class="style14">></span><br><span class="style14"><</span>
<span class="style18">/html</span><span class="style14">></span><br>
</p></p></div>
</div>
<h2>Example Explained</h2>
<ul>
<li>The <strong>DOCTYPE</strong> declaration defines the document type to be HTML</li>
<li>The text between <strong><html></strong> and <strong></html></strong> describes an HTML document</li>
<li>The text between <strong><head></strong> and <strong></head></strong> provides information about the
document</li>
<li>The text between <strong><title></strong> and <strong></title></strong> provides a title for the document</li>
<li>The text between <strong><body></strong> and <strong></body></strong> describes the visible page
content</li>
<li>The text between <strong><h1></strong> and <strong></h1></strong> describes a heading</li>
<li>The text between <strong><p></strong> and <strong></p></strong> describes a paragraph</li>
</ul>
<p>Using this description, a web browser can display a document with a heading and a paragraph.</p>

<h2>HTML Tags</h2>
<p>HTML tags are <strong>keywords</strong> (tag names) surrounded by <strong>angle brackets</strong>:</p>
<div><b><span class="style14"><</span><span class="style18">tagname</span><span class="style14">></span>content<span
class="style14"><</span><span class="style18">/tagname</span><span class="style14">></span></b></div>
<ul>
<li>HTML tags normally come <strong>in pairs</strong> like <p> and </p></li>
<li>The first tag in a pair is the <strong>start tag,</strong> the second tag is the <strong>end tag</strong></li>
<li>The end tag is written like the start tag, but with a <strong>slash</strong> before the tag name</li>
</ul>
<p style="border-style:solid; border-width:thin; border-color:#cccccc; border-spacing:50px; padding: 10px; width:800px" ><img
src="Images/lamp.jpg" valign="middle" align="left"> The start tag is often called the opening tag. The end tag is often called the closing
tag. </p>
<h2>Web Browsers</h2>
<p>The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents
and display them.</p><p>The browser does not display the HTML tags, but uses them to
determine how to display the document:</p>
<img src="Images/img_chrome.png">
<h2>HTML Page Structure</h2>
<p>Below is a visualization of an HTML page structure:</p>
<div class="box1">
<html> <br>
<div class="box2">
<head>
<div class="box2"><title>Page title</title></div>
</head> </div>
<div class="box3">
<body>
<div class="box3"><h1>This is a heading</h1></div>
<div class="box3"><p>This is a paragraph.</p></div>
<div class="box3"><p>This is another paragraph.</p></div>
</body> </div> </html> </div>

<p style="border-style:solid; border-width:thin; border-color:#cccccc; border-spacing:50px; padding: 10px; width:800px" ><img src="Images/lamp.jpg"
valign="middle"> Only the <body> area (the white area) is displayed by the browser.</p>
<h2>HTML Versions</h2>
<p>Since the early days of the web, there have been many versions of HTML:</p>
<table>
<tr>
<th>Version</th>
<th>Year</th>
</tr> <tr>
<td>HTML</td>
<td>1991</td>
</tr> <tr>
<td>HTML 2.0</td>
<td>1995</td>
</tr> <tr>
<td>HTML 3.2</td>
<td>1997</td>
</tr> <tr>
<td>HTML 4.01</td>
<td>1999</td>
</tr> <tr>
<td>HTML 4.01</td>
<td>1999</td>
</tr> <tr>
<td>HTML 5</td>
<td>2014</td>
</tr>
</table>
<p><a href="html-editors.html" style="color:#4CAF50"><strong><h3 align="right">Next Chapter >></h3></strong></a></p>
</div>

html-editors.html
<h1>HTML Editors</h1>
<p><a href="introduction.html" style="color:#4CAF50"><h3><strong><< Previous Chapter</strong></h3></a></p>
<h2>Write HTML Using Notepad or TextEdit</h2>
<p>HTML can be edited by using professional HTML
editors like:</p>
<ul>
<li>Microsoft WebMatrix</li>
<li>Sublime Text</li>
</ul>
<p>However, for learning HTML we recommend a text
editor like Notepad (PC) or TextEdit (Mac).</p>
<p>We believe using a simple text editor is a good way
to learn HTML.</p>
<p>Follow the 4 steps below to create your first web
page with Notepad.</p>
<h2>Step 1: Open Notepad</h2>
<p>To open Notepad in Windows 7 or earlier:</p>
<p>Click <strong>Start</strong> (bottom
left on your screen). Click <strong>All Programs
</strong>. Click <strong>Accessories</strong>.
Click <strong>Notepad</strong>.</p>
<p>To open Notepad in Windows 8 or later:</p>
<p>Open the <strong>Start Screen</strong>
 (the window symbol at the bottom left on your
screen). Type <strong>Notepad</strong>.</p>
<h2>Step 2: Write Some HTML</h2>
<p>Write or copy some HTML into Notepad.</p>

<div class="box">
<div class="inner"><span class="style19"><</span><span class="style18">html</span><span
class="style19">></span><br />
<span class="style19"><</span><span class="style18">body</span><span
class="style19">></span><br/><br/>
<span class="style19"><</span><span class="style18">h1</span><span class="style19">></span>My
First Heading<span class="style19"><</span><span class="style18">/h1</span><span
class="style19">></span><br /> <br />
<span class="style19"><</span><span class="style18">p</span><span class="style19">></span>My
first paragraph.<span class="style19"><</span><span class="style18">/p</span><span
class="style19">></span><br /> <br />
<span class="style19"><</span>
<span class="style18">/body</span>
<span class="style19">></span><br />
<span class="style19"><</span>
<span class="style18">/html</span>
<span class="style19">></span>
</div>
</div><br>
<img src="Images/img_notepad.PNG" />

<h2>Step 3: Save the HTML Page</h2>
<p>Save the file on your computer.</p>
<p>Select <strong>File > Save as</strong> in the Notepad menu.</p>
<p>Name the file "index.html" or any other name ending with html or htm.</p>
<p>UTF-8 is the preferred encoding for HTML files.</p>
<p>ANSI encoding covers US and Western European characters only.</p>
<img src="Images/img_saveas.png" />
<p style="border-style:solid; border-width:thin; border-color:#cccccc; border-spacing:50px;
padding: 10px; width:800px" ><img src="Images/lamp.jpg" valign="middle" align="left">You can
use either .htm or .html as file extension. There is no
difference, it is up to you.</p>
<h2>Step 4: View HTML Page in Your Browser</h2>
<p>Open the saved HTML file in your favorite browser.
The result will look much like this:</p>
<img src="Images/img_chrome (1).png" />
<p style="border-style:solid; border-width:thin;
border-color:#cccccc; border-spacing:50px; padding: 10px;
width:800px" ><img src="Images/lamp.jpg" valign="middle"
align="left">To open a file in a browser, double click on the
file, or right-click, and choose open with.</p>
<p><a href="basic.html" style="color:#4CAF50"><strong>
<h3 align="right">Next Chapter >></h3></strong></a></p>
</div>

basic.html
<h1>HTML Basic Examples</h1>
<p><a href="html-editors.html" style="color:#4CAF50"><h3><strong>
<< Previous Chapter</strong></h3></a></p>
<p>Don't worry if these examples use tags you have not learned.</p>
<p>You will learn about them in the next chapters.</p>
<h2>HTML Documents</h2>
<p>The HTML document itself begins with <strong><html>
</strong>  and ends with <strong></html></strong>.</p>
<p>The visible part of the HTML document is between   <strong> <
body></strong> and <strong></body></strong>.
</p> <div class="box">
<h3><b> Example:</b></h3> <div class="inner">
<p><span class="style15"><</span><span class="style14">html</span><span class="style15">></span><br>
<span class="style15"><</span><span class="style14">body</span><span class="style15">></span><br> <br>
<span class="style15"><</span><span class="style14">h1</span><span class="style15">></span>My First Heading<span
class="style15"><</span><span class="style14">/h1</span><span class="style15">></span><br> <br>
<span class="style15"><</span><span class="style14">p</span><span class="style15">></span>My first paragraph.<span
class="style15"><</span><span class="style14">/p</span><span class="style15">></span><br> <br>
<span class="style15"><</span><span class="style14">/body</span><span class="style15">></span><br>
<span class="style15"><</span><span class="style14">/html</span><span class="style15">></span> </div>
</div> <hr color="#eeeeee">

<h2>HTML Headings</h2>
<p>HTML headings are defined with the <strong><h1> </strong>to
<strong><h6></strong> tags:</p>
<div class="box">
<h3><b> Example:</b></h3>
<div class="inner">
<p><span class="style15"><</span><span class="style14">h1</span><span class="style15">></span>This is a
heading<span class="style15"><</span><span class="style14">/h1</span><span class="style15">></span>
heading<span class="style15"><</span><span class="style14">/h2</span><span class="style15">></span>
heading<span class="style15"><</span><span class="style14">/h3</span><span
class="style15">></span><br> <br> </div>
<a href="i editor-basic2.html" target="_blank" style="color:white"><button class="button button">Try it
Yourself</button></a></div>
<h2>HTML Paragraphs</h2>
<p>HTML paragraphs are defined with the <strong><p>
</strong> tag:</p> <div class="box">
<p><span class="style15"><</span><span class="style14">p
</span><span class="style15">></span>This is a paragraph.
<span class="style15"><</span><span class="style14">/p</span>
<span class="style15">></span>
<p><span class="style15"><</span><span class="style14">p
</span><span class="style15">></span>This is another
paragraph.<span class="style15"><</span><span class="style14">
/p</span><span class="style15">></span><br>
<br> </div>
<a href="i editor-basic3.html" target="_blank" style="color:white">
<button class="button button">Try it Yourself</button></a></div>

<h2>HTML Links</h2>
<p>HTML links are defined with the <strong><a></strong> tag:</p>
<div class="box“> <h3><b> Example:</b></h3> <div class="inner">
<p><span class="style15"><</span><span class="style14">a href=<span
class="style15">"http://www.xlrays.com/xl"</span></span><span class="style15">></span>This is
a link<span class="style15"><</span><span class="style14">/a</span><span class="style15">></span><br>
<br> </div>
<a href="i editor-basic4.html" target="_blank" style="color:white"><button class="button button">Try it
<p>The link's destination is specified in the <strong>href attribute</strong>. </p>
<p>Attributes are used to provide additional information about HTML elements.</p>
<hr color="#eeeeee“> <h2>HTML Images</h2>
<p>HTML images are defined with the <strong><img>
</strong> tag.</p> <p>The source file (<strong>src</strong>),
alternative text (<strong>alt</strong>), and size (<strong>width
</strong> and <strong>height</strong>) are provided
as <strong>attributes</strong>:</p> <div class="box">
<p><span class="style15"><</span><span class="style14">
<span class="style15">"ImagesXLrays-logo.png" <span
class="style14">alt=</span>"XLrays.com" </span>
</span><span class="style15"><span class="style14">width=</span>
"104" <span class="style14">height=</span>"110&
quot;></span><br> <br> </div>
<a href="i editor-basic5.html" target="_blank" style="color:white">
<p style="border-style:solid; border-width:thin; border-color:#cccccc;
border-spacing:50px; padding: 10px; width:800px" ><img src=
"Images/lamp.jpg" valign="middle" align="left">You will learn more
about attributes in a later chapter.</p> <p><a href="elements.html"
style="color:#4CAF50"><strong><h3 align="right">Next Chapter >>
</h3></strong></a></p></div>

elements.html
<h1>HTML Elements </h1>
<p><a href="basic.html" style="color:#4CAF50"><h3><strong><< Previous Chapter</strong></h3></a></p>
<p>HTML <strong>documents</strong>
 are made up by HTML <strong>
elements</strong>.</p>
<h2>HTML Elements</h2>
<p>HTML elements are written with a
 <strong>start</strong> tag,
with an <strong>end</strong>&
nbsp;tag, with the <strong>
content</strong> in between:</p>
<h3><span class="style15"><</span>
<span class="style14">tagname</span>
<span class="style15">></span>content<span class="style15"><</span><span
class="style14">/tagname</span><span class="style15">></span></h3>
<p>The HTML <strong>element</strong> is everything from the start tag to the end tag:</p>
<h3><span class="style15"><</span><span class="style14">p</span><span class="style15">></span>My first
HTML paragraph.<span class="style15"><</span><span class="style14">/p</span><span
class="style15">></span></h3>

<table> <tr>
<th>Start Tag</th>
<th>Element Content</th>
<th>End Tag</th>
</tr> <tr>
<td><h1></td>
<td>My First Heading</td>
<td></h1></td>
</tr> <tr>
<td><p></td>
<td>Mt First Paragraph.</td>
<td></p></td>
</tr> <tr>
<td><br></td>
<td></td> <td></td>
</tr></table>
"Images/lamp.jpg" valign="middle" align="top"> Some HTML
Elements do not have an end tag.</p> <hr color="#eeeeee“> <h2>
Nested HTML Elements</h2> <p>HTML elements can be nested
(elements can contain elements).</p> <p>All HTML documents consist of nested
HTML elements.</p> <p>This example contains 4 HTML elements:</p>
<p><span class="style15"><</span><span class="style14">html</span><span class="style15">></span><br>
<span class="style15"><</span><span class="style14">body</span><span class="style15">></span><br> <br>
<span class="style15"><</span><span class="style14">h1</span><span class="style15">></span>My First Heading<span
class="style15"><</span><span class="style14">/h1</span><span class="style15">></span>
<p><span class="style15"><</span><span class="style14">p</span><span class="style15">></span>My first paragraph.<span
class="style15"><</span><span class="style14">/p</span><span class="style15">></span><br> <br>
<span class="style15"><</span><span class="style14">/body</span><span class="style15">></span><br>
<span class="style15"><</span><span class="style14">/html</span><span class="style15">></span> </div>
<a href="i editor-intro.html" target="_blank" style="color:white"><button class="button button">Try it Yourself</button></a></div>

<h2>HTML Example Explained</h2>
<p>The <strong><html></strong> element defines the <strong>
whole document</strong>.</p><p>It has a <strong>start</strong> tag <
html> and an <strong>end</strong> tag </html>.</p><p>The element
 <strong>content</strong> is another HTML element (the <body> element)
.</p> <div class="box">
<div class="inner"><span class="style19 style15"><</span><span class="style18 style14">
html</span><span class="style19 style15">></span><br />
<span class="style19 style15"><</span><span class="style18 style14">body</span><span
class="style19 style15">></span><br /><br />
<span class="style19 style15"><</span><span class="style18 style14">h1</span><span
class="style19 style15">></span>My First Heading<span class="style19 style15"><
</span><span class="style18 style14">/h1</span><span class="style19 style15">>
</span><br /> <br /> <span class="style19 style15"><</span><span class="style18
style14">p</span><span class="style19 style15">></span>My first paragraph.<span
class="style19 style15"><</span><span class="style18 style14">/p</span><span class="style19 style15">></span><br /> <br />
<span class="style19 style15"><</span><span class="style18 style14">/body</span><span class="style19 style15">></span><br />
<span class="style19 style15"><</span><span class="style18 style14">/html</span><span class="style19 style15">></span>
</div> </div>
<p>The <strong><body></strong> element defines the <strong>document body</strong>.</p>
<p>It has a <strong>start</strong> tag <body> and an <strong>end</strong> tag </body>.</p>
<p>The element <strong>content</strong> is two other HTML elements (<h1> and <p>).</p>
<div class="box“> <div class="inner">
<p><span class="style19 style15"><</span><span class="style18 style14">body</span><span class="style19 style15">></span><br />
<br /> <span class="style19 style15"><</span><span class="style18 style14">h1</span><span class="style19
style15">></span>My First Heading<span class="style19 style15"><</span><span class="style18 style14">/h1</span><span
class="style19 style15">></span> <br />
<span class="style19 style15"><</span><span class="style18 style14">p</span><span class="style19 style15">></span>My first
paragraph.<span class="style19 style15"><</span><span class="style18 style14">/p</span><span class="style19
style15">></span></p>
<p><span class="style19 style15"><</span><span class="style18 style14">/body</span><span class="style19 style15">></span></p>
</div> </div>

<p>The <strong><h1></strong> element defines a <strong>heading</strong>.</p>
<p>It has a <strong>start</strong> tag <h1> and an <strong>end</strong> tag
</h1>.</p>
<p>The element <strong>content</strong> is: My First Heading.</p> <div class="box">
<div class="inner"><span class="style19 style15"><</span><span class="style18 style14">h1</span><span
class="style19 style15">></span>My First Heading<span class="style19 style15"><</span><span
class="style18 style14">/h1</span><span class="style19 style15">></span></div> </div>
<p>The <strong><p></strong> element defines
a <strong>paragraph</strong>.</p>
<p>It has a <strong>start</strong> tag <p> and an <strong>end</strong> 
tag </p>.</p>
<p>The element <strong>
content</strong> is: My first
paragraph.</p> <p> </p>
<div class="box">
<div class="inner"><span class=“
style19 style15"><</span><span class=“
style18 style14">p</span><span class=“
style19 style15">></span>My first
paragraph.<span class="style19 style15">
<</span><span class="style18 style14">
/p</span><span class="style19 style15">
></span></div> </div>
<hr color="#eeeeee“> <h2>Don't Forget
the End Tag</h2> <p>Some HTML
elements will display correctly, even if you
forget the end tag:</p>

<h2>Empty HTML Elements</h2>
<p>HTML elements with no content are called empty elements.</p>
<p><br> is an empty element without a closing tag (the <br> tag defines a line break).</p>
<p>Empty elements can be "closed" in the opening tag like this: <br />.</p>
<p>HTML5 does not require empty elements to be closed. But if you want stricter validation, or you
need to make your document readable by XML parsers, you should close all HTML elements.</p>
<h2>HTML Tip: Use Lowercase Tags</h2>
<p>HTML tags are not case sensitive: <P>
means the same as <p>.</p>
<p>The HTML5 standard does not require
lowercase tags, but W3C <strong>r
ecommends</strong> lowercase in
HTML4, and <strong>demands</strong>
lowercase for stricter document types like XHTML.
</p>
<p style="border-style:solid; border-width:thin;
Border-color:#cccccc; border-spacing:50px;
padding: 10px; width:800px" ><img src=“
Images/lamp.jpg" valign="middle">
At XLrays we always use lowercase tags.</p>
<a href="attributes.html" style=“
color:#4CAF50"><strong><h3 align="right">
Next Chapter >></h3></strong></a></p>
</div>

attributes.html
<h1>HTML Attributes </h1>
<p><a href="elements.html" style="color:#4CAF50"><h3><strong><< Previous Chapter
</strong></h3></a></p> <hr color="#eeeeee">
<p>HTML <strong>documents</strong> are made up by HTML 
<strong>elements</strong>.</p> <hr color="#eeeeee">
<h2>HTML Attributes</h2> <ul>
<li>HTML elements can have <strong>attributes</strong></li>
<li>Attributes provide <strong>additional information</strong> about
an element</li> <li>Attributes are always specified in <strong>the start tag
</strong></li> <li>Attributes come in name/value pairs like: <strong>name=
"value"</strong></li> </ul> <h2>The lang Attribute</h2>
<p>The document language can be declared in the <strong><html>
</strong> tag.</p> <p>The language is declared in the <strong>lang
</strong> attribute.</p> <p>Declaring a language is important for accessibility
applications (screen readers) and search engines:</p> <div class="box">
<div class="inner"><span class="style15"><</span><span class="style16">html
lang=</span><span class="style15">"en-US"></span><br /> <span class="style15">
<</span><span class="style16">body</span><span class="style15">></span><br /> <br />
<span class="style15"><</span><span class="style16">h1</span><span class="style15">></span>My First Heading<span><span
class="style15"><</span><span class="style16">/h1</span></span><span class="style15">></span><br /> <br />
<span class="style15"><</span><span class="style16">p</span><span class="style15">></span>My first paragraph.<span
class="style15"><</span><span class="style16">/p</span><span class="style15">></span><br /> <br />
<span class="style15"><</span><span class="style16">/body</span><span class="style15">></span><br />
<span class="style15"><</span><span class="style16">/html</span><span class="style15">></span></div></div>
<p>The first two letters specify the language (en). If there is a dialect, use two more letters (US).</p>

<p title="About XLrays"><span class="style15"><</span><span class=“
style16">p title=</span><span class="style15">"About XLrays ">
</span><br> XLrays is a web developer's site.<br> It provides tutorials
and references covering<br> HTML of web programming.<br>
<span class="style15"><</span><span class="style16">/p</span>
<span class="style15">></span></div>
<a href="i editor-attributes.html" target="_blank" style="color:white">
"Images/lamp.jpg" valign="middle" align="left"> When you move the
mouse over the element, the title will be displayed as a tooltip.</p>
<hr color="#eeeeee“><h2>The href Attribute</h2>
<p>HTML links are defined with the <strong><a></strong>
 tag. The link address is specified in the <strong>href</strong>
 attribute:</p><div class="box“> <h3><b> Example:</b></h3>
<div class="inner“> <p title="About XLrays"><span class="style15"><
</span><span class="style16">a href=</span><span class="style15">"http://www.xlrays.com/xl"></span>This
is a link<span class="style15"><</span><span class="style16">/a</span><span class="style15">></span>
</div> <a href="i editor-basic4.html" target="_blank" style="color:white"><button class="button button">Try it
Yourself</button></a></div><br>
You will learn more about links and the <a> tag later in this tutorial.
<hr color="#eeeeee“><h2>Size Attributes</h2><p>HTML images are defined with
the <strong><img></strong> tag.</p>
<p>The filename of the source (<strong>src</strong>), and the size of the image
(<strong>width</strong> and <strong>height</strong>) are all provided
as <strong>attributes</strong>:</p
<a href="links.html" style="color:#4CAF50"><strong><h3 align="right">Next Chapter >></h3>
</strong></a></p></div>

links.html
<h1>HTML Links</h1> <hr color="#eeeeee">
Links are found in nearly all web pages. Links allow users to click
their way from page to page. <hr color="#eeeeee">
<h2>HTML Links - Hyperlinks</h2> <p>HTML links are hyperlinks.
</p> <p>A hyperlink is a text or an image you can click on, and
jump to another document.</p> <hr color="#eeeeee">
<h2>HTML Links - Syntax</h2>
<p>In HTML, links are defined with the <strong><a>
</strong> tag:</p> <div class="box">
<div class="inner"><span class="style19 style15"><</span>
<span class="style18 style14">a href=<span class="style15">
"url"</span></span><span class="style19 style15">></span>Link text <span
class="style19 style15"><</span><span class="style18 style14">/a</span><span class="style19
style15">></span></div> </div> <br>
<div class="box“> <h3><b> Example:</b></h3>
<div class="inner"><span class="style19 style15"><</span><span class="style18 style14">a
href=<span class="style15">"http://www.xlrays.com/xl"</span></span><span
class="style19 style15">></span>This is a link<span class="style19 style15"><</span><span
class="style18 style14">/a</span><span class="style19 style15">></span></div>
<a href="i editor-basic4.html" target="_blank" style="color:white"><button class="button button">Try
it Yourself</button></a></div>

<p>The <strong>href</strong> attribute specifies the destination address (http://www.xlrays.com/xl)</p>
<p>The <strong>link text</strong> is the visible part (Visit our HTML tutorial).</p>
<p>Clicking on the link text, will send you to the specified address.</p>
<p style="border-style:solid; border-width:thin; border-color:#cccccc; border-spacing:50px; padding: 10px;
width:800px" ><img src="Images/lamp.jpg" valign="middle" align="left">The link text does not have to be text. It
can be an HTML image or any other HTML element.</p>
<p style="border-style:solid; border-width:thin; border-color:#cccccc; border-spacing:50px; padding: 10px;
width:800px" ><img src="Images/lamp.jpg" valign="middle" align="left">Without a trailing slash on subfolder
addresses, you might generate two requests to the server. Many servers will automatically add a trailing slash to
the address, and then create a new request.</p>
<hr color="#eeeeee“> <h2>Local Links</h2>
<p>The example above used an absolute URL (A full web address
).</p> <p>A local link (link to the same web site) is specified with
a relative URL (without http://www....).</p>
<span class="style18 style14">a href=<span class="style15">&
quot;introduction.html"</span></span><span class=“
style19 style15">></span>HTML Introduction <span class=
"style19 style15"><</span><span class="style18 style14">/a
</span><span class="style19 style15">></span></div>
<a href="i editor-links.html" target="_blank" style=“
color:white"><button class="button button">Try it Yourself
</button></a></div> <hr color="#eeeeee“> <h2>HTML Links –
Colors</h2> <p>When you move the mouse over a link, two
things will normally happen:</p> <ul> <li>The mouse arrow will
turn into a little hand</li> <li>The color of the link element will
change</li> </ul> <p>By default, a link will appear like this (in all
browsers):</p> <ul><li>An unvisited link is underlined and blue
</li> <li>A visited link is underlined and purple</li>
<li>An active link is underlined and red</li> </ul>

<p>You can change the default colors, by using styles:</p> <div class="box“> <h3><b> Example:</b></h3> <div class="inner">
<p><span class="style14"><style></span><br><span class="style14">a:link </span>   {<span
class="style14">color:</span><span class="style15">green;</span> <span class="style14">background-
color:</span><span class="style15">transparent;</span> <span class="style14">text-decoration:</span><span class=
"style15"> none</span>} <br><br> <span class="style14">a:visited</span> {<span
class="style14">color:</span><span class="style15"> pink;</span>  <span class="style14">background-
color:</span><span class="style15">transparent;</span> <span class="style14">text-decoration:</span><span
class="style15">none</span>}<br><br><span class="style14">a:hover</span>   {<span
class="style14">color:</span><span class="style15">red;</span> <span class="style14">background-
color:</span><span class="style15">transparent;</span> <span class="style14">text-decoration:</span><span
class="style15">underline </span>}<br><br><span class="style14">a:active</span>  {<span
class="style14">color:</span><span class="style15">yellow;</span> <span class="style14">background-
color:</span><span class="style15">transparent; </span> <span class="style14">text-decoration:</span><span
class="style15">underline</span>}<br><span class="style14">
</style></span></p> </div> <a href="i editor-links2.html"
target="_blank" style="color:white"><button class="button">Try it
Yourself</button></a></div> <hr color="#eeeeee“> <h2>HTML
Links - The target Attribute</h2> <p>The <strong>target
</strong> attribute specifies where to open the linked
document.</p> <p>This example will open the linked document in
a new browser window or in a new tab:</p>
<span class="style18 style14">a href=<span class="style15">"
http://www.xlrays.com/xl" <span class="style14">target=
</span>"_blank"</span></span><span class="style19 style15">
></span>Visit XLrays!<span class="style19 style15"><</span>
<span class="style18 style14">/a</span><span class="style19 style15">
></span></div> <a href="i editor-links3.html" target="_blank"
style="color:white"><button class="button">Try it Yourself</button>
</a></div>

<table> <tr>
<th>Target Value</th>
<th>Description</th> </tr> <tr>
<td>_blank</td>
<td>Opens the linked document in
a new window or tab</td> </tr> <tr>
<td>_self</td>
the same frame as it was clicked (this
is default)</td> </tr> <tr>
<td>_parent</td>
the parent frame</td> </tr> <tr>
<td>_top</td>
the full body of the window</td>
</tr> <tr> <td>framename</td>
a named frame</td>
</tr></table><br>
<h2>HTML Links - Image as Link
</h2> <p>It is common to use images
as links:</p> <div class="box">
<h3><b> Example:</b></h3> <div class="inner"><span class="style19 style15"><</span><span class="style18 style14">a href=<span
class="style15">"index.html"</span></span><span class="style19 style15">></span><br>
<span class="style15"><</span><span class="style14">img src=</span><span
class="style15">"Images/smiley.gif"</span> <span class="style14">alt=</span><span class="style15">"HTML
tutorial"></span><br> <span class="style19 style15"><</span><span class="style18 style14">/a</span><span class="style19
style15">></span></div> <a href="i editor-links4.html" target="_blank" style="color:white"><button class="button">Try it

<hr color="#eeeeee“> <h2>HTML Links - Create a Bookmark</h2>
<p>HTML bookmarks are used to allow readers to jump to specific parts of a Web page.</p>
<p>Bookmarks are practical if your website has long pages.</p>
<p>To make a bookmark, you must first create the bookmark, and then add a link to it.</p>
<p>When the link is clicked, the page will scroll to the location with the bookmark.</p>
<h2>Example</h2> <p>First, create a bookmark with the id attribute:</p> <div class="box">
<div class="inner"><span class="style19 style15"><</span><span class="style14">h2 id=
</span><span class="style15">"tips"</span><span class="style19 style15">></span >Useful Tips
Section<span class="style19 style15"><</span><span class="style18 style14">/h2</span><span
class="style19 style15">></span></div> </div><br>Then, add a link to the bookmark ("Useful
Tips Section"), from within the same page:<br><br> <div class="box“> <div class="inner"><span
class="style19 style15"><</span><span class="style14">a href=</span><span class="style15">"tips"</span><span class="style19
style15">></span >Visit the Useful Tips Section<span class="style19 style15"><</span>
<span class="style18 style14">/a</span><span class="style19 style15">></span></div> </div> <br>
Or, add a link to the bookmark ("Useful Tips Section"), from another page: <br><br>
<div class="inner"><span class="style19 style15"><</span><span class="style18 style14">a href=
<span class="style15">"html_tips.html#tips"</span></span><span class="style19 style15">></span>Visit the Useful Tips
Section<span class="style19 style15"><</span><span class="style18 style14">/a</span><span class="style19
style15">></span></div>
<a href="i editor-links5.html" target="_blank" style="color:white"><button class="button">Try it Yourself</button></a> </div>
<hr color="#eeeeee“> <h2>Chapter Summary</h2> <ul>
<li>Use the HTML <strong><a></strong> element to define a link</li>
<li>Use the HTML <strong>href</strong> attribute to define the link address</li>
<li>Use the HTML <strong>target</strong> attribute to define where to open the linked document</li>
<li>Use the HTML <strong><img></strong> element (inside <a>) to use an image as a link</li>
<li>Use the HTML <strong>id</strong> attribute (id="<em>value</em>") to define bookmarks in a page</li>
<li>Use the HTML <strong>href </strong>attribute (href="#<em>value</em>") to link to the bookmark</li>
</ul> <a href="index.html" style="color:#4CAF50"><strong>
<h3 align="right">Next Chapter >></h3> </strong></a> </p></div>

Thank You
www.xlrays.com/xl
Xlrays
OnlineWebTutorials

Xlrays online web tutorials

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to Xlrays online web tutorials

Similar to Xlrays online web tutorials (20)

Recently uploaded

Recently uploaded (20)

Xlrays online web tutorials