Embed Size (px)
Citation preview
XlraysOnline Web Tutorials
Developed By: Yogesh Gupta
www.xlrays.com/xl
Xlrays
Index.html (Home Page)
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;}
Xlra
ys
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; background-color: #eeeeee;}li a.nav { display: block; color: #000; padding: 8px 0 8px 16px; text-decoration: none;}li a.active { background-color: #4CAF50; color: white;}li a:hover:not(#active) { background-color: #555; color: white;}/* end left nav bar */
HTML Tutorials
/* button */.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; 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;
border-radius: 50px 15px;}/* box */div.box { background-color: #eeeeee; width: 380px; padding: 0px; border: 0px solid #eeeeee; margin: 0px;
border-radius: 15px 50px;}div.box:hover { box-shadow: 0px 0px 50px #4CAF50;
border-radius: 50px 15px;}
div.inner { background-color: white; padding:10px; border-radius: 15px 50px; 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); border-radius: 50px 15px;}.style14 {color: #0000FF}.style18 {color: #CC0000}
a:link{ text-decoration:none;}a:hover {text-decoration:underline;}img:hover { box-shadow: 0px 0px 50px #4CAF50;}</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
home.html<div class="style12" id="section"> <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>
introduction.html
<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 <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> <hr width="100%" color="#eeeeee">
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><a href="i editor-intro.html" target="_blank" style="color:white"><button class="button button">Try it Yourself</button></a></div><hr width="100%" color="#eeeeee"><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><hr width="100%" color="#eeeeee">
<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>
<hr width="100%" color="#eeeeee"><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"><hr width="100%" color="#eeeeee"><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>
<hr width="100%" color="#eeeeee"><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
html-editors.html<div class="style12" id="section"> <h1>HTML Editors</h1> <p><a href="introduction.html" style="color:#4CAF50"><h3><strong><< Previous Chapter</strong></h3></a></p> <hr color="#eeeeee"> <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> <hr color="#eeeeee"> <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> <hr color="#eeeeee"> <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" /> <hr color="#eeeeee">
<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> <hr color="#eeeeee"> <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
basic.html<div class="style12" id="section"> <h1>HTML Basic Examples</h1> <p><a href="html-editors.html" style="color:#4CAF50"><h3><strong><< Previous Chapter</strong></h3></a></p> <hr color="#eeeeee"> <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> <hr color="#eeeeee"> <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><a href="i editor-intro.html" target="_blank" style="color:white"><button class="button button">Try it Yourself</button></a></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> <p><span class="style15"><</span><span class="style14">h2</span><span class="style15">></span>This is a heading<span
class="style15"><</span><span class="style14">/h2</span><span class="style15">></span> <p><span class="style15"><</span><span class="style14">h3</span><span class="style15">></span>This is a 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> <hr color="#eeeeee"> <h2>HTML Paragraphs</h2> <p>HTML paragraphs are defined with the <strong><p></strong> tag:</p> <div class="box"> <h3><b> Example:</b></h3> <div class="inner"> <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> <hr color="#eeeeee">
<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 Yourself</button></a></div> <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"> <h3><b> Example:</b></h3> <div class="inner"> <p><span class="style15"><</span><span class="style14"><span class="style15">"Images\XLrays-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"></span><br> <br> </div><a href="i editor-basic5.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" 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
elements.html
<div class="style12" id="section"> <h1>HTML Elements </h1> <p><a href="basic.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 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><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="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><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> <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>
<hr color="#eeeeee"><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> <hr color="#eeeeee"> <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>recommends</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<div class="style12" id="section"> <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><hr color="#eeeeee">
<div class="box“> <h3><b> Example:</b></h3> <div class="inner"> <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"><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" 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
links.html<div class="style12" id="section"> <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> <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">"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> <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 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> <td>Opens the linked document in the same frame as it was clicked (this is default)</td> </tr> <tr> <td>_parent</td> <td>Opens the linked document in the parent frame</td> </tr> <tr> <td>_top</td> <td>Opens the linked document in the full body of the window</td> </tr> <tr> <td>framename</td> <td>Opens the linked document in a named frame</td> </tr></table><br> <hr color="#eeeeee"> <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 Yourself</button></a></div>
<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="box“> <h3><b> Example:</b></h3> <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 Youwww.xlrays.com/xl
Xlra
ysOnline Web Tutorials
