juyung/web-practice
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Archive

Browse source
This commit is contained in:
Jay 2013-12-08 23:01:44 -08:00
commit f8f4984bd3
1 changed files with 663 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

663
html/index.html Executable file
View file

@ -0,0 +1,663 @@
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>HTML Basic tags</title>
<meta name="author" content="Juyoung Lee" charset="UTF-8">
<meta property="og:description" content: This Website is a page for HTML tutorial./>
<!--
<base href="http://www.yahoo.com/"> If you will use <a href=/html/index.html" then it will be considered as <a href="http://www.yahoo.com/">
-->
<link href="_img/_juyounglee.tk/favicon.ico" rel="icon" type="image/x-icon"/>
<!--author and character set information-->
</head>
<body>
<div style="text-align:center;font-size:25px; font-family:arial">
Created by Juyoung. Built this site while I was teaching myself HTML and CSS.
<hr/>
</div>
<!--START START START -->
<h1 title="Hello HTML!">Titled Heading Tag Example</h1>
<font face="arial" color="#CC0000"> <p>This is a paragraph tag.</p>
</font>
<p id="html">This is para explains what is HTML</p>
<p id="css">This para explains what is Casecading Style Sheet</p>
<!--id tag: Possible to identify just that element and its content.-->
class="className1 className2 className3"
<!--
The class attribute is used to associate an element with a style sheet and specifies the class of element.
-->
<p style="font-family:arial; color:#FF0000;">Some text...</p>
<p align="left">This is left aligned.</p>
<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is justified. This works when you have multiple lines in your paragraph and you want to justify all the lines so that they can look more nice.</p>
Hello<br/>
You are on my HTML tutorial website.<br/>
Thanks<br/>
Juyoung Lee
<p>This is not in the center.</p>
<center>
<p>This is in the center.</p>
</center>
A good example of this technique appears in the movie "12 Angry Men"
<p>A good example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men"</p>
<pre>function testFunction( strText ){
alert (strText)
}
</pre>
<!--between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.-->
<p>This is para one and should be on top</p>
<hr/>
<p>This is para two and should be on bottom</p>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>This following word uses a <i>italicized</i> typeface.</p>
<p>The following word uses a <u>underlined</u> typeface.</p>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
<!--In a monospaced font, each letter is the same width.-->
<p>The following word uses a <sup>superscript</sup> typeface.</p>
<!--displayed half a character's height above the other characters.-->
<p>The following word uses a <sub>subscript</sub> typeface.</p>
<!--displayed half a character's height beneath the other characters.-->
<p>The following word uses a <big>big</big> typeface.</p>
<p>The following word uses a <small>small</small> typeface.</p>
<hr width="75%" color="red" size="4" />
<hr width="45%" size="6" noshade />
<!-- Grouping - The <div> and <span> Elements:
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.-->
<div id="menu" align="middle">
<a href="index.html">HOME</a> |
<a href="/about/contact_us.html">CONTACT</a> |
<a href="/about/index.html">ABOUT</a>
</div>
<!--html tutorial pg.19-->
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
<!-- This is the example of span tag and the div tag alongwith CSS-->
<div><p>This is the example of<span style="color:green"> span tag</span> and the<span style="color:purple"> div tag</span> alongwith CSS</p></div>
<p>You <em>must</em> remember to close elements in XHTML.</p>
<!-- Emphasized text - <em> -->
<p>You <strong>must</strong> remember to close elements in XHTML.</p>
<p>I have a friend called <abbr title="Abhishek">Abhy</abbr>.</p>
<!--Text Abbreviation - <abbr> -->
<p>This chapter covers marking up text in <acronym title="Extensible Hypertext Markup Language">XHTML</acronym>.</p>
<!--On HTML5, <acronym> is deleted because of confusing with <abbr> -->
<p>This tutorial teaches you how mark up your documents for the web using
<dfn>XHTML</dfn>.</p> <!-- definition. rendering element in an italic font-->
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
<!-- <blockquote> element is indented from the left and right edges of the surrounding text.-->
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote cite="http://www.google.com/"> XHTML 1.0 is the W3C's first Recommendations for XHTML,...</blockquote>
<!-- You can use the cite attribute on the <blockquote> element to indicate the source of the quote.-->
<p>Amit is in Spain, <q>He is their at my home. I think I am wrong.</q></p>
<!-- quote -->
<p>This HTML Tutorial is derived from <cite>World Wide Web Standard for HTML</cite>.</p>
<!-- cite -->
<h1><code>This is inside code element</code></h1>
<!-- computer code-->
<h1><kbd>This is inside keyboard kbd element</kbd></h1>
<!--
keyboard text - represented in a monospaced font rather like the content of the <code> element.
This is used like "CTRL + C"
-->
<p><code>document.write("<var>user-name</var>")</code></p>
<!-- used to indicate content of that element is a variable that can be supplied by a user. -->
<p>Result produced by the program is <samp>Hello World</samp></p>
<!-- sample output. used when documenting programming concepts. -->
<address>1234 56th Ave W #789 Lynnwood, WA 12345</address>
<!-- adress -->
<!--
*Block-level elements: they appear on the screen as if they have a carriage return or line break before and after them.
e.g. <p>, <h1>~<h6>, <ul>, >ol>, <dl>, <pre>, <hr/>, <blockquote> and <address>
*Inline elements: they can appear within sentences and do not have to appear on a new line of their own.
e.g. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd> and <var>
-->
<!--[if IE 6]>Special instructions for IE 6 here<![endif]-->
<!-- html.tutorial pg.25 -->
<p>This is <comment>not</comment> Internet Explorer.</p>
<!-- using comment tag-->
<script>
<!--
document.write("Hello World!");
//-->
</script>
<!--
If you are using Java Script or VB Script in your HTML code then it is recommended to put that script code insdie proper HTML Comments to make old browser works properly.
Commenting scripts and style sheets
-->
<style>
<!--
img{
border:0px;
}
//-->
</style>
<!-- To become familiar with JAVA Script and CAscading Style Sheet, you need to refer different tutorial-->
<!--font size values 1(smallest) to 7(largest). default=3-->
<font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>
<font size="-1">Font size="-1"</font>
<font size="+1">Font size="+1"</font>
<font size="+2">Font size="+2"</font>
<font size="+3">Font size="+3"</font>
<font size="+4">Font size="+4"</font>
<!-- specify the relative font size. <font size="+n"> or <font size="-n" -->
<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>
<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS, Lucida Console">
<font face="Time New Roman">
<!--
browsers will display the first font face that it has available.
If none of your selections are installed, then it will display the default font face Times New Roman.
-->
<!--pg.28-->
<font color="#FF00FF">This text is hexcolor #FF00FF</font>
<font color="red">This text is red</font>
<img src='image URL' attr_name='attr+value'...more attributes/>
<img src="http://www.edcc.edu/_resources/images/site/logo_header_print.jpg" alt="HTML Tutorial"/>
<img src="http://www.edcc.edu/_resources/images/site/logo_header_print.jpg" alt="HTML Tutorial" width="300" height="100" border="2" align="right" title="HTML tutorial"/>
<!-- How to remove an image border: set border="0" or through CSS by setting img{border:0px;} -->
<p><strong> Example 1</strong></p>
<p>This is the first paragraph that appears above the paragraph with the image!</p>
<p><img src="http://www.edcc.edu/_resources/images/site/logo_header_print.jpg" width="75" height="75" alt="HTML Tutorial" align="right">
The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.
The let and right image-alignment values tell the browser to place an image against the left or right margin, respectively, of the current text flow. The browser then renders subsequent document content in the remaining portion of the flow adjacent to the image. The net result is that the document content following the image gets wrapped around the image.
<p><strong> Example 2</strong></p>
<p>This is the first paragraph that appears above the paragraph with the image!</p>
<p><img src="http://www.edcc.edu/_resources/images/site/logo_header_print.jpg" vspace="10" hspace="15" width="75" height="75" alt="HTML Tutorial" align="right">
The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.</p>
<p>The left and right image-alignment values tell the browser to place an image against the left or right margin, respectively, of the current text flow. The browser then renders subsequent document content in the remaining portion of the flow adjacent to the image. The net result is that the document content following the image gets wrapped around the image.</p>
<a href="Document URL" attr_name="attr_value",,,more attributes/>
<!-- <a> element is called anchor tag -->
<a href="http://www.google.com/" target="_black">TP Home</a> | <!-- load the new page in current window> -->
<a href="http://www.google.com/" target="_self">AMROOD Home</a> | <!-- default -->
<a href="http://www.google.com/" target="_top">Change Images Home</a> <!-- '_top' or '_parent'. same window will be used to display the loaded document. -->
<h1>HTML text Links <a name="top"></a></h1>
<a herf="/html/html_text_links.html#top">Go to the Top</a>
<!-- Setting Link Colors; recommended to use CSS to set colors of links, visited links and active links-->
<!--
<style>
a:link {color:#900B09; background-color:transparent}
a:visited {color:#900B09; background-color:transparent}
a:active {color:#FF0000; background-color:transparent}
a:hover {color:#FF0000; background-color:transparent}
</style> -->
<!-- Otherwise... <body alink="#ff0000" link="#900b09" vlink="#900b09">....</body> -->
<a herf="http:/www.example.com/file.pdf">Download File</a>
<!-- HTML Image Links: how to use images to create hyper links -->
<a href="http://www.facebook.com/jylee.2ju0" target="_self">
<img src="/images/home.gif" alt="Tutorials Point Home" border="0"> <a/>
<!-- HTML Tables: a row is contained inside a <tr> tag. each cell is written inside the row element using a <td> tag.-->
<p>Table 1</p>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<p>Table 2</p>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
<p>Table 3</p>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
<!-- use <colspan> to merge two or more columns into a single column.
use <rowspan> to merge two or more rows into a single row. -->
</table>
<p>Table 4</p>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hassein</td>
<td>7000</td>
</tr>
</table>
<p>Table 5</p>
<table border='5' bordercolor='green' bgcolor='gray'>
<!--bordercolor=border's color, bgcolor=background's color-->
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspen="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
</table>
Table Example 1
<table border="1" background="/images/home/gif">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3" background="/images/pattern1.gif">
Row 3 Cell 1
</td></tr>
</table>
<!-- table height and width -->
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<!-- Using table caption -->
<table border="1">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, column 2</td>
</tr>
</table>
Table 2
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
<tr>
...more rows here containing for cells...
</tr>
</table>
Table 3
<table border="5">
<tr>
<td>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
<td>
<ul>
<li>This is another cell</li>
<li>Using list inside this cell</li>
</ul>
</td>
</tr>
<tr><td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
My Table 1
<table border="3" bordercolor='blue' bgcolor='pink'>
<tr><th>Students</th><th>Number</th></tr>
<tr><td bgcolor=white>Lee</td><td>1234</td></tr>
<tr><td>Kang</td><td bgcolor="white">5678</td></tr>
<tr><td bgcolor="white">Min</td><td>9012</td></tr>
<tr><td>Kim</td><td>3456</td></tr>
<tr bgcolor="white"><td>Park</td><td>7890</td></tr>
</table>
Page. 43 Table
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan='4'>This is the foot of the table</td>
</tr>
</tfoot>
<tbody><tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td colspan='4'>...more rows here containing four cells....</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td colspan='4'>...more rows here containing four cells....</td>
</tr>
</tbody>
</table>
<!-- using one table inside another table-->
<p>Using one table inside another table</p>
<table border="1">
<tr><td>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
<td>
<ul>
<li>This is another cell</li>
<li>Using list inside this cell</li>
</ul>
</td>
</tr>
<tr><td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<p>HTML Colors- Color Names | Hex Codes</p>
<ul><li>Black | #000000</li>
<li>Gray | #C0C0C0</li>
<li>Silver</li>
<li>White | #FFFFFF</li>
<li>Yellow | #FFFF00</li>
<li>Lime | #00FF00</li>
<li>Aqua | #00FFFF</li>
<li>Fuchsia | #FF00FF</li>
<li>Red | #FF0000</li>
<li>Green</li>
<li>Blue | #0000FF</li>
<li>Purple</li>
<li>Maroon</li>
<li>Olive</li>
<li>Navy</li>
<li>Teal</li>
</ul>
Form 1
<h1>HTML Forms</h1>
<!-- HTML Forms are required when you want to collect data from the site visitor. For example, registration information: name, email address, credit card, etc.-->
<form action="back-end script" method="posting method">
form elements like input, textarea etc.
</form>
<br>
Form 2-Text input controls
<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name"/>
<input type="submit" value="submit"/>
</form>
<!--
Name: This is the name of the form.
action: Here you will specify any script URL which will receive uploaded data.
method: Here you will specify method to be used to upload data. It can take various values but most frequently used are GET and POST.
target: It specifies the target page where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
Go page.49 to see more...
-->
<form action="http://www.google.com/" method="get">
Login :
<input type="text" name="login"/>
<br>
Password:
<input type="text" name="password"/>
<input type="submit" value="submit"/>
</form>
<h1>Form3-Multiple Lines Text Input Controls:</h1>
<form action="http://www.google.com/" method="get">
Description: <br/>
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
<input type="submit" value="submit"/>
</form>
<h1>Form 4 - Creating Button</h1>
<form action="http://www.facebook.com/" method="get">
<input type="submit" name="Submit" value="Submit"/>
<br/><br/>
<input type="reset" value="Reset"/>
<input type="button" value="Button"/>
</form>
<h1>Form 5 - Using an image to create a button</h1>
<form action="http://www.google.com/" method="get">
<input type="image" name="imagebutton" src="URL"/>
</form>
<h1>Form 6 - Checkboxes Control</h1>
<form action="http://www.google.com/" method="get">
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
<input type="submit" value="Select Subject" />
</form>
<h1>Form 7 - Radiobox Control</h1>
<form action="http://www.google.com/" method="post">
<input type="radio" name="subject" value="maths"/> Maths
<input type="radio" name="subject" value="physics"/> Physics
<input type="submit" value="Select Subject"/>
</form>
<h1>Form 8 - Select box Control</h1>
<form action="http://www.google.com/" method="post">
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physcis">Physcis</option>
</select>
<input type="submit" value="Submit"/>
</form>
<h1>Form 9 - File Select Boxes</h1>
<form action="http://www.google.com/" method="post"
name="fileupload" enctype="multipart/form-data">
<input type="file" name="fileupload" acept="image/*"/>
</form>
<h1>Form 10 - Hidden Controls</h1>
<form action="http://www.google.com/"
method="get" name="pages">
<p>This is page 10</p>
<input type="hidden" name="pagenumber" value="10"/>
<input type="submit" value="Next Page"/>
</form>
<!-- How to set a table background using pattrern -->
<table background="/images/pattern1.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
<p>Another example on table background using pattrern</p>
<table background="/images/pattern2.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
<br/>
<p>HTML Embed Multimedia</p>
<embed src="/html/yourfile.mid" width="100%" height="60" >
<noembed><img src="yourimage.gif" ></noembed>
</embed>
<h1>Embed a HTML document in an HTML document itself</h1>
<object data="data/test.htm" type="text/html"
width="300" height="200">
alt : <a href="http://www.google.com/">www.google.com</a>
</object>
<h1>Embed a PDF document in an HTML document</h1>
<object data="data/test.htm" type="application/pdf"
width="300" height="200">
alt : <a href="data/test.pdf">test.pdf</a>
</object>
<h1>Add a flash document</h1>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="penguin" codebase="someplace/swflash.cab"
width="200" height="300">
<param name="movie" value="flash/penguin.swf" />
<param name="quality" value="high" />
<img src="penguin.jpg" width="200"
height="300" alt="Penguin" />
</object>
<h1>Add a java applet into a HTML document</h1>
<object
classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width="200" height="200">
<param name="code" value="applet.class">
</object>
<h3><font color="red">You've just finished reading the HTML tutorial page.</h3></font>
<h3>http://www.tutorialspoint.com/html/index.htm</h3>
<h3>Created by Juyoung Lee</h3>
<hr/><br><br>
</body>
</html>