Every webmaster tries to represent best of his skills in front of his readers. These skills aren't limited to writings only but blog design, plug-ins selection, layout of blog along with several other factors decide his expertise. Blog-design is most important part of a blog presentation because it is the first thing which is viewed by the user. As a famous proverb says, first impression is the last impression so the first viewable item must be fully optimized to leave good impact. There are thousands of templates available online for different platforms but not every one satisfy with these blogs. There is always a room for improvement in every thing so even after installing a desired template, a user might wishes to make required changes in design and layout of blog. This isn't possible until the user doesn't have any know-how of web-designing languages.
HTML, CSS and Javascript are three essential languages for designing a website. If you have command over these three languages, then you can easily modify your template and web site design. You should learn basics of these languages in order to know what is working behind the words, text, graphics and design of your web-site. There isn't a surety that you always get easiest and automatic programs to make changes in design so to tackle any hurdle in this field, having a know-how to these languages. In this article, I am going to give a brief introduction to these languages. Lets start with HTML.
What Is HTML?
HTML stands for Hyper Text Markup Language. It is a markup language to describe a web-page. Markup language means that it uses a set of markup tags which define different element of the document. It is basic language for any web-page. Programs called Web-Browsers are capable of fetching and rendering HTML elements so they are displayed as defined in HTML document.The elements including text and images can be altered by using HTML tags. These elements are defined by different tags enclosed between an opening tag and another closing tag with an addition of forward slash ( / ) for example Title of a web-page is tagged as following.
<title>Title Of My Webpage</title>An HTML document starts with <html> tag and ends with </html>. Rest of the elements occur between these tags. There are two parts of an HTML document which are Head and Body. They are defined by tags <head> and <body> respectively.
Head element of an HTML document can include title tags, meta tags, script tags and style tags to define that document.
Body element contains all the content of document including text, images, hyperlinks, lists, tables etc. The content is also defined and differentiated by a set of tags. For example a heading is defined by heading tags from <h1> to <h6>, hyperlink is defined by<a> tag.
There is a typical example of an HTML document below. You can edit this document in Notepad and save it with .html extension so it becomes viewable by Web-browser. You can also use an online HTML editor to edit and check live HTML appearance.
<html>
<head>
<style>
h1 { font-size: 72px; color : red ; text-align: center;}
p { font-size: 36px; color: blue; }
</style>
<title>HTML Demo Document</title>
</head>
<body>
<h1>How To Edit HTML</h1>
<p>Copy and paste this demo document in Notepad. Save it with .html extension for example, demo.html. Open the saved document to see this demo document in web browser.</p>
</body>
</html>
This is the simplest example of an HTML document. To learn more about HTML, visit W3Schools HTML Tutorial.What IS CSS?
CSS is concerned with design of a template. If you have a little knowledge of HTML, then you might know that some rules are used to design an HTML element. The rules are applied individually for each HTML element. By using CSS, we can apply these rules for a class or set of specific elements so we don't need to define them individually. In an HTML document, CSS is is alloted with <style> tag kept inside <head> section of web-page as you can see in the demo HTML example above.
A CSS rule to define an element is kept inside curly brackets "{ }". The element is called Selector which points toward HTML element in document. The feature to be defined is called property which is declared by value. A set of property and value is called a declaration in which a colon is used to differ between property and value. Each declaration in a CSS syntax is separated by semi-colon.
Below is an example of a CSS syntax.
p {
text-align: center ;
color: blue ;
font-size: 24px ;
}
The selector p is used to define <p> tag which refers to paragraph of a document. Assigning the values in the above examples means that every Paragraph will be centrally aligned, with font size of 24px in blue color. Other HTML elements can also be defined with this method. HTML IDs and Classes can also be defined through this method. For defining a class, a full-stop is placed before Selector while for ID hash "#" sign is used. Below is an example<html>
<head>
<style>
#name {
background-color: yellow;
}
p {
text-align: center ;
color: blue ;
font-size: 24px ;
}
.location {
background-color: red ;
text-decoration: uppercase;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="name">My name is Jari Ullah.</p>
<p class="location">I live in Pakistan.</p>
</div>
<p>Edit this document to practice CSS and HTML.</p>
</body>
</html>
Copy and paste the above document in Notepad or any HTML editor to see it live. You can learn complete CSS from W3School's CSS Tutorial.What Is Javascript:
Javascript is programming language of web-documents. It can do a lot of things in a webpage that aren't possible with only CSS and HTML since Javascript is the most powerful among these three web-design languages. It is not only a powerful language but also difficult to learn than CSS and HTML. Like CSS, it also uses HTML ids and classes to perform specific functions. It is scripting language and able to perform Dynamic functions. Usually its functions work with a trigger or a click.Understanding Javascript isn't easier as the above two languages so I am not going to give any example.
You can learn Javascript from W3School's Javascript Tutorials.
Post A Comment:
0 comments: