Well.. I was supposed to take a short class for my developer group in a recent project. I thought I’d rather post the topics and some detail of that class here, which can help beginners.
First of all, we are going to learn some keywords and their use:
- HTML - Hyper Text Markup Language.
- Used to write web pages. Browsers understand this language. You have to talk with web browsers in this language.
- Tags
- Tags are used to distinguish different elements in a web page. As an example, we’d use the anchor tag (<a>) to define anchor or links.
- CSS - Cascading Style Sheet
- CSS is used to define style for a web page. We’d learn about CSS in a later session.
- Scripts
- Scripts are some programming language which helps to interact a web page with user and server. PHP, JavaScript etc. are commonly used scripts in web development.
Now I’m going to explain some rapidly used tags here.
Anchor:
Anchor tag is very important. We use this to link some other page or website using this tag. Attributes of anchor tags are: ‘href’, ‘title’, ‘onClick’ etc. href defines the target of the anchor; title has the definition of the link and onClick is used to define some JavaScript click action for that link.
Example:
<a href="http://www.creash.com.bd/" title="Creash Website" onClick="javascript:alert('Creash Clicked!')">Creash</a>
Above code provides following output:
Paragraph:
Its an important tag. Texts in an web page are placed inside paragraphs. This makes it easy to manipulate and stylize.
Example:
<p style="border:1px solid #CCCCCC; margin: 3px;>Loream ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis dui. Aenean nec odio sit amet nisi faucibus euismod.</p>
Above code will provide following output:
Loream ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque quis dui. Aenean nec odio sit amet nisi faucibus euismod.
Div:
This is another most important tag. This tag is used to divide your web page in different parts. You can specify styles to a div tag; provide id and manipulate it using JavaScript. General attributes of a div tag are: ‘id’, ‘position’, ‘float’ etc. You can place a div any where of your website.
Example:
<div id="example1" style="position: relative; width:100%; height:50px; float:right; background: #CCCCCC; color:#000000; border: 1px dashed #FFFFFF; font-size: 15px; display: block; clear: both; margin-bottom: 15px;">This is an example div tag with some popular styling</div>
Above code will produce following output:
Now you can access the above div with its id ‘example1′ and add any action.
Span:
The last topic of this session. This tag is used to differentiate a small part inside another part. Suppose a block of text inside a large div.
Example:
<div>Hello there! <span style="font-weight:bold">This text is inside span!</span> You are watching an use of span tag.</div>
Will produce:
Hope thats enough babbling for today. I’ll produce some more on next session :D
Learn more HTML and other web programming from this amazing website: W3Schools
Take care…. :)
Published under: HTML, Tips & Tricks, Web