The Very Easy HTML
You will be able to understand and build a simple web page in a short time session. You can work offline and save your online-time. Forget tens of pages of HTML tutorial books. It takes only less than 2 hours and a single A4 blank paper.
HTML is the main markup language for displaying pages and other information that can be displayed in a browser. A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. In logic, syntax is anything having to do with formal languages or formal systems without regard to any interpretation or meaning given to them.
As a very core of web building blocks, indeed, it is an absolute requirement to build a web page. At a glance, the code will be looked very complicated, well, do not be deluded by the eyes. You will find how easy it is, just follow the steps:
* Copy this HTML code and paste it into a text editor (e.g.;notepad or wordpad):
For those who are new to HTML, I strongly recommend to use this HTML code:
<!DOCTYPE>
<html>
<body>
<h1>place your title here</h1>
<h2>'h2'element results the smaller text than 'h1'element</h2>
<h3>Everytime you make a HTML document, it must be started by '!DOCTYPE', 'html' and 'body'
as shown above. Never forget to write an element between <> (we called it tag)</h3>
<p>'!DOCTYPE' defines the newer version of HTML. 'h1' stands for heading1, 'h' element
consists of 'h1'-'h6'. 'p' stands for paragraph which you can write anything between it.
everytime you start an element (e.g.;p) it must be closed by slash (/) mark (e.g.;/p)</p>
<hr/>
<p>'hr/' element make a horizontal line on your page</p>
<p><b>'b' stands for bold, this is to make bold text style</b><br/>
<i>'i' stands for italic, this is to make italic text style</i><br/><b>'br/' element makes a new paragraph</b></p>
<hr/>
<p><big>'big' element makes the big text</big>
<em>'em' stands for emphasized, makes an emphasized text</em>
<small>'small' element makes small text</small>
<strong>'strong' element'makes strong text,</strong>
<sub>'sub' element makes subscripted text!</sub>
<sup>'sup' element makes superscripted text</sup>
<ins>'ins' element makes inserted text</ins>
<del>'del' element makes deleted text</del></p>
<br/>
<p style="font-family:verdana;color:red;font-size:30px;">This is to style the text. You can change the content of an element but you can not change the symbol of an element</p>
<br/>
<a href="http://buzzingyourbizz.blogspot.com/">this is how to make link</a>
</body>
</html>
For those who are familiar to HTML, can use this HTML code:
<!DOCTYPE>
<html>
<body>
<div id="container" style="width:970px">
<div id="header" style="background-color:#F0E68C;">
<h1 style="margin-bottom:2;text-align:center;">Place The Title Of Your Site Here!</h1></div>
<div id="menu" style="background-color:#FFE4C4;height:1500px;width:150px;float:left;">
<b>menu</b><br/>
<a href="http://buzzingyourbizz.blogspot.com/">This is To Make a Link</a><br/>
It is a sample<br/>
It is a sample</div>
<div id="ads" style="background-color:#FFE4C4;height:1500px;width:150px;float:right;">
<b>ads</b><br/>
<ul>
<li>Bag</li>
<li>Shoes</li>
</ul>
<p>(Sample above is to make 'unordered list')</p>
<ol>
<li>Bag</li>
<li>Shoes</li>
</ol>
<p>(Sample above is to make 'ordered list')</p>
<dl>
<dt>Bag</dt>
<dd>-Gucci</dd>
<dt>Shoes</dt>
<dd>-Nike</dd>
</dl>
<p>(Sample above is to make 'definition list')</p>
<p>We can put text, images, links, etc inside the list</p>
</div>
<div id="content" style:backgroun-color:#EEEEEE;height:1500px;width:670px;float:left;">
<table border="1">
<tr>
<th>Bag</th>
<th>Shoes</th>
<th>Netbook</th>
</tr>
<tr>
<td>Gucci</td>
<td>Nike</td>
<td>Zyrex</td>
</tr>
<tr>
<td>Prada</td>
<td>Eagle</td>
<td><a href="http://buzzingyourbizz.blogspot.com/">This is a link</a><td>
</tr>
</table>
<br/>
<p>(Sample above is to make the 'table'. We can put text, link, images, etc inside the 'table')</p>
<br/>
<a href="http://www.google.com/intl/en/ads/" target="_blank">This is how to make a link will be opened on a new window</a>
<br/>
<form>
First name:<input type="text" name="firstname"/><br/>
Last name:<input type="text" name="lastname"/>
</form>
<p>(Sample above is to make the 'Text Fields')</p>
<br/>
<form>
password:<input type="password" name="pwd"/>
</form>
<p>(Sample above is to make a 'password coloum')</p>
<form>
<input type="radio" name="sex" value="male"/>Male<br/>
<input type="radio" name="sex" value="female"/>Female
</form>
<p>(Sample above is to make the 'Radio Buttons'. It limitates a user to choose ONLY ONE option)</p>
<br/>
<form>
<input type="checkbox" name="vehicle" value="bike"/>I have a bike<br/>
<input type="checkbox" name="vehicle" value="Car"/>I have a car
</form>
<p>(Sample above is to make the 'Checkbox'.It lets a user to choose several or all options)</p>
<br/>
<form name="input" action="html_form_action.asp" method="get">
Username:<input type="text" name="user"/>
<input type="submit" value="submit"/>
</form>
<p>(Sample above is to make the 'submit button'. This used to send data to a server)</p>
<br/>
<form action="">
<select name="cars">
<option value="Mercedez">Mercedez</option>
<option value="Audi">Audi</option>
<option value="Fiat">Fiat</option>
</select>
</form>
<p>(Sample above is to make a 'simple drop down list')</p>
<br/>
<form action="">
<select name="cars">
<option value="Mercedez">Mercedez</option>
<option value="Audi" selected="selected">Audi</option>
<option value="Fiat">Fiat</option>
</select>
</form>
<p>(Sample above is to make 'drop down list with a pre-selected value')</p>
<br/>
<textarea rows="10" cols="30">A man is having a problem.
</textarea>
<p>(Sample above is to make the 'textarea'. It lets the users to write any information they want to submit)</p>
<br/>
<form action="">
<input type="button" value="click here">
</form>
<p>(Sample above is to make a 'button')</p>
<hr/>
<p>The horizontal line above appears as a result of 'hr/' element</p>
<p style="font-family:mistral;color:#DC143C;font-size:25px;">This is a sample to style the text</p>
<img src="http://seriouscat.com/serious_cat_is_serious.jpg" width="120" height="100"/>
<p>(Sample above to display an image from external source)</p>
<p>(Sample below is to make a 'footer')</p>
<div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright 4:01 PM 6/21/2012@buzzingyourbizz.blogspot.com (this is footer)</div>
</div>
</body>
</html>
* Save it as a HTML file (e.g.; web1.htm or web1.html)
* Open the file you have saved, you will find that the code you saved has changed into a sample of web page design. That web page design actually contains the samples of most commonly elements that used to build a simple web page
* To edit the page and learn more about HTML, simply download X-Ray Goggles on my Free Downloads page -it takes a very small space and save... guaranteed- (at this moment you need to work online) and follow the very simple steps of it. The very nice thing is that you can twinkle-twinkle with any web sites when you are using X-Ray Goggles.
* If you need more HTML color-references (to use the color you like), you can browse on the net by using 'HTML color names' keywords
* As your reference, you can print the code out and keep it in your wallet so that you can see it when you need it
* Happy web-making!
* Learn CSS (Cascading Style Sheet) is coming, soon!
The Easy Way To Make An Animated Image On Your Web Page
One of the reasons that makes a visitor stays on your page any longer is an interesting appearance of your pages, the keyword is; "What pleases the eyes will make them stay longer". It is something natural when an animated image is more interesting than a static one. The question is; how to make an animated image on your pages, like this:
Well, it is very easy!
Run the photoscape (if you do not have this app, you can download it from the internet)
Click on animated GIF menu
Choose the files you are about to remix by drag-drop
Saved the files you have remixed on the destination folder
Upload the image to your web page, that's all!
Of course, to upload the image to your web page you need to be familiar to HTML, if you are not, you can learn it shortly on the Web Making menu
No comments :
Post a Comment
Racism, abuse, harassment are strictly forbidden!!