tag:blogger.com,1999:blog-54101017100179804222024-03-09T07:46:47.601+08:00HTML for Beginners"Everything you need to know about HTML is here. A complete and reliable HTML reference for beginners in blog version."Donny Salazarhttp://www.blogger.com/profile/09758260433394915218noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-5410101710017980422.post-13518704747685991162010-08-15T12:19:00.001+08:002010-08-15T15:01:40.095+08:00HTML Markup: Elements, Attributes and Values<span style="font-family: Georgia, "Times New Roman", serif;">This is just the continuation of my previous post about <a href="http://guideforhtml.blogspot.com/2010/08/basic-of-html.html">Basic HTML</a>. You need this concept especially for the beginners and some of you do not know this yet. This is not for insulting your intelligence but I just want to be detailed on my topic especially on this blog tutorial of HTML. I will start a three new topics on this one post: The HTML Elements, Attributes and Values. These are what we called the three principal types of (X)HTML.</span><br />
<br />
<span style="font-family: Georgia;">Let's start to differentiate the three topics:</span><br />
<br />
<h2>HTML Elements</h2><span style="font-family: Georgia, "Times New Roman", serif;">HTML Elements is the one that structured the different parts of the Web page. This is the header, the paragraph which contains the important informations. Some elements can have one or more attributes which further describe the purpose and the content of the elements.</span><br />
<br />
<span style="font-family: Georgia;">HTML Elements can contain text or other HTML elements, or they can be also empty. This is simply like a formula. A non-empty elements consists of: <strong>opening tag</strong>(the element's name with corresponding attributes, if any) enclosed in less than or greater than signs, the <strong>content</strong> and a <strong>closing tag</strong>( with a forward slash followed by the elements name, again enclosed with greater than and less than signs). Are you confused? Let's just take an example below:</span><br />
<br />
<span style="font-family: Georgia;">Example of non-empty HTML Element: The <span style="color: blue;"><b>Great Filipino</b></span> </span><br />
<br />
<span style="font-family: Georgia;">This is the breakdown of this typical (X)HTML Elements:</span><br />
<ul><li><span style="font-family: Georgia;"><span style="color: blue;">< ></span> is called the opening tag or the angle brackets.</span></li>
<li><span style="color: blue; font-family: Georgia;">Great Filipino <span style="color: black;">is the content or the affected text.</span></span></li>
<li><span style="color: blue; font-family: Georgia;"></> <span style="color: black;">is the closing tag with a forward slash (/).</span></span></li>
</ul><span style="font-family: Georgia;">In other words, HTML Elements is everything within the start tag and a closing tag. There are also have an <strong>empty</strong> HTML element, which is only a combination of an opening and closing tag. The Elements name was followed by an attributes, a space, forward slash, and a final greater than sign. Let's take a look at the example below:</span><br />
<br />
<span style="font-family: Georgia;">Example of empty HTML Element: <span style="color: blue;"><img src="flower.jpg" /></span></span><br />
<br />
<span style="color: black; font-family: Georgia;">Noticed the sample above for the empty HTML element. Compared to the first example, it doesn't have any content or text around except that it was only consists of a single tag which serves to open and close the elements. Always remember this: a forward slash shown above is optional in the HTML but in (X)HTML is it required. <strong>I will make a post reminder about deciding what to use about HTML or an (X)HTML </strong>before I begin my post on basic web structure.</span><br />
<br />
<h2>HTML Attributes and Values</h2><span style="font-family: Georgia, "Times New Roman", serif;">HTML Attributes contains or provides additional information about an element. Take note that attribute values in XHTML must be always enclosed in the quotation mark. In HTML, it is sometimes optional. Let's take another example below about of what I've mentioned above.</span><br />
<br />
<span style="font-family: Georgia;">Example of HTML Attributes /Values: <span style="color: blue;"><img src="flower.jpg" width="50" /></span></span><br />
<br />
<span style="color: black; font-family: Georgia;">Let's breakdown the HTML elements above:</span><br />
<ul><li><span style="color: blue; font-family: Georgia;">src <span style="color: black;">is an attribute of img.</span></span></li>
<li><span style="color: blue; font-family: Georgia;">"flower.jpg" <span style="color: black;">is the value of src.</span></span></li>
<li><span style="color: blue; font-family: Georgia;">width <span style="color: black;">is also an attribute of img.</span></span></li>
<li><span style="color: blue; font-family: Georgia;">"50" <span style="color: black;">is the value for width.</span></span></li>
</ul><span style="font-family: Georgia;">In working with HTML attributes, you will encounter may have any value at all while some are limited or have its predefined values. In this tutorial, I will provide a page for your reference about acceptable values mentioned. But this will come soon. In XHTML, predefined values are always written in lowercase while in HTML, it doesn't matter.</span><br />
<br />
<span style="font-family: Georgia;">Some HTML attributes are defined with number or percentage for their values in describing sizes, length or width. Some only defined in numeric value (without units). Others have units which are always defined in "pixels". Some HTML attributes contains a value in the form of URL or the Uniform Resource Locator. Let's take a simple example below. </span><br />
<br />
<span style="font-family: Georgia;">Example of HTML Attributes with URL value: <span style="color: blue;"><a href="http://guideforhtml.blogspot.com">HTML for Beginners</a></span></span><br />
<br />
<span style="color: black; font-family: Georgia;">Take note that <span style="color: blue;">href </span><span style="color: black;">is an attribute with <a href="http://guideforhtml.blogspot.com/"><span style="color: blue;">http://guideforhtml.blogspot.com</span></a> as the value of href. We'll get into details about link when we begin to discuss the details about HTML tags.</span></span><br />
<br />
<span style="font-family: Georgia;">Pardon that we have a lot of topics first to be considered before going into making HTML webpages. Though we already started on how to make your initial web page in <a href="http://guideforhtml.blogspot.com/2010/08/getting-started-with-html.html">HTML Getting Started</a> , it is important to understand every concept first to avoid lot of confusions later. Always stay tune her at: </span><br />
<br />
<span style="font-family: Georgia;">HTML for Beginners....</span>Donny Salazarhttp://www.blogger.com/profile/09758260433394915218noreply@blogger.comtag:blogger.com,1999:blog-5410101710017980422.post-27587520625219131732010-08-14T11:15:00.001+08:002010-08-14T17:55:20.245+08:00The Basic of HTML<span style="font-family: Georgia, "Times New Roman", serif;">Last time I promised that I will continue making post about HTML. Today, I'm gonna start presenting its basic. These are the basic HTML that you'll going to encounter everytime you start making your web pages. Below will begin the topic on how to start making and save your intial web page for editing your HTML.</span><br />
<br />
<h2>How to Save and Edit your First Web Page?</h2><ul><li><span style="font-family: Georgia, "Times New Roman", serif;">First, open your notepad. <strong>Note:</strong> (Take note that everytime you edit your HTML document, it should be open it as a notepad. This is if you are using your notepad as an HTML editor. If you are using other software, then you may open it and edit as to what type of software you are using.)</span></li>
<li><span style="font-family: Georgia;">Once you've open your notepad, just click save as. The dialog box will appear as to what type of document you are going to save your file. </span></li>
<li><span style="font-family: Georgia;">On the filename, give your file with a <strong>.htm</strong> or .<strong>html</strong> extension ( i.e. <strong>index.html</strong>). <strong>Index.html</strong> or <strong>default.html</strong> will served as your home page for your web site ( i.e <a href="http://www.yourdomain.com/">http://www.yourdomain.com/</a>). Don't missed that! This is very important for beginners.</span></li>
<li><span style="font-family: Georgia;">Choose the folder location where you preferred to save your intial web page. </span></li>
<li><span style="font-family: Georgia;">Finally, you have to click save. </span></li>
</ul><span style="font-family: Georgia;">In editing your HTML document or a webpage:</span><br />
<ul><li><span style="font-family: Georgia;">Open your save HTML document as notepad. As mentioned earlier, this is if you are using notepad as your HTML editor. If you are using other software, open it and edit as to what software you are using.</span></li>
<li><span style="font-family: Georgia;">Then, click open and you are ready for editing.</span></li>
<li><span style="font-family: Georgia;">Just click save after you made changes from your file.</span></li>
<li><span style="font-family: Georgia;">To see how it looks like, double click you html file and you will see the result. </span></li>
</ul><span style="font-family: Georgia;">Now, you know how to start with your web pages. Next is, I will present to you those basics tags commonly encountered as you work with your HTML file or web page. In order for you to see how it looks like, just follow the steps above then you may copy and paste the code presented below and you will see the result. </span><br />
<br />
<br />
<h2>The HTML heading</h2><span style="font-family: Georgia, "Times New Roman", serif;">The HTML headings are tags which are defined in six ways <h1> to <h6>. Below is the basic tags for this one:</span><br />
<br />
<br />
<span style="font-family: "Courier New", Courier, monospace;"><h1>This is my first heading</h1></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><h2>This is my second heading</h2></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><h3>This is my third heading</h3></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><h4>This is my fourth heading</h4></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><h5>This is my fifth heading</h5></span><br />
<span style="font-family: "Courier New", Courier, monospace;"><h6>This is my six heading</h6></span><br />
<br />
<br />
<span style="font-family: Georgia, "Times New Roman", serif;">If you try the steps above, you will noticed that tag <h1>, </h1> have the biggest font while <h6>, </h6> have the smallest font. The purpose of this is for organizing your headings while working with your contents.</span><br />
<br />
<h2>The HTML Paragraphs</h2><span style="font-family: Georgia, "Times New Roman", serif;">The HTML paragraph is defined with <p>, </p> tags. Take a look with the example below:</span><br />
<br />
<br />
<span style="font-family: "Courier New", Courier, monospace;"><p>This is my first paragraph.The next sentence...</p></span><br />
<span style="font-family: Courier New;"><p>This is my another paragraph</p></span><br />
<br />
<br />
<span style="font-family: Georgia, "Times New Roman", serif;">This is usually the main content of your web page. You will noticed that once you've closed your paragraph with a </p>, </p> tags it means that it is the start of the next paragraph.</span><br />
<br />
<h2>The HTML Link</h2><span style="font-family: Georgia, "Times New Roman", serif;">The link is only defined with an <a> tag. Just see how the link is presented at HTML.</span><br />
<br />
<br />
<span style="font-family: "Courier New", Courier, monospace;"><a href="http://guideforhtml.blogspot.com">HTML for Beginners</a></span><br />
<br />
<br />
<span style="font-family: Georgia, "Times New Roman", serif;">If you try it, you will see that "HTML for Beginners" which is what you called anchor text is the clickable title of the link. </span><br />
<br />
<h2>The HTML Images</h2><span style="font-family: Georgia, "Times New Roman", serif;">The HTML images is defined with <img>. Take a look with sample below:</span><br />
<br />
<br />
<span style="font-family: "Courier New", Courier, monospace;"><img src="<a href="http://projectcool.com/images/earth.gif">http://projectcool.com/images/earth.gif</a>" width="50" height="50"/> </span><br />
<br />
<br />
<span style="font-family: Georgia, "Times New Roman", serif;">Noticed that the link above in presenting the HTML images is the file for images. Also includes the dimension where the author is preferred to present it. </span><br />
<br />
<span style="font-family: Georgia;">These are the basics of HTML that I can share for you today. On my next post, I will elaborate each HTML tags for you. </span><br />
<br />
<span style="font-family: Georgia, "Times New Roman", serif;">For the meantime, try using the steps above or you may try it here in the <strong><a href="http://www.maths.surrey.ac.uk/explore/nigelspages/htmltry.htm" target="_blank">HTML practice editor</a></strong> I researched for you so that you may see the result of each tags discussed above. I suggest that you try to explore in advance using the editor or the steps I've given you in editing your initial web page. Don't worry I will proceed with the presentation only here at:</span><br />
<br />
<span style="font-family: Georgia;">HTML for Beginners...</span>Donny Salazarhttp://www.blogger.com/profile/09758260433394915218noreply@blogger.comtag:blogger.com,1999:blog-5410101710017980422.post-35759543167299314322010-08-08T07:29:00.004+08:002010-08-15T12:21:14.532+08:00Getting Started With HTML<span style="font-family: Georgia, "Times New Roman", serif;">Before we get into details of creating a webpages through HTML, there are things that you need to consider before you work with your own web page files.</span><br />
<br />
<span style="font-family: Georgia;">For the beginners, you may rather ask this question:</span><br />
<br />
<br />
<h2>What do I need to start with my webpage or to edit HTML?</h2><span style="font-family: Georgia, "Times New Roman", serif;">Actually, for the beginners you don't need any tools in order to learn HTML except for a notepad. A notepad was a ready installed software from your own computer that you will need to do editing when working with your webpages. I do not recommend any software or server except for what I have mentioned above. Existing software nowadays are very easy to use and if the beginners like you would used that would actually skip some important things that you need to know in details. Those softwares were only recommended for most web developers for their projects to cope up or to meet certain deadlines. Just believe that notepad is easy to use to edit HTML. </span><br />
<br />
<span style="font-family: Georgia;">Now that you know the main tool in editing your HTML, you may want to know how your web site would look like. By the way before I proceed I just want to clarify that tutorial on planning for your own topic for your own website will be covered by this blog version for it is a completely different topic. I just want to cover this site a pure HTML discussion. </span><br />
<br />
<br />
<h2>Designing and Organizing Your Web page</h2><span style="font-family: Georgia, "Times New Roman", serif;">Designing your own website would take a lot of time. You may jump this step and start writing with your contents. You may organize your web files later if you want. Below are suggested steps that you may follow to design your website:</span><br />
<ol><li><span style="font-family: Georgia;">First, figure out why are you creating this web site and what do you want to impart with your audience.</span></li>
<li><span style="font-family: Georgia;">Think what kind of readers or audience you would expect to have. How are your contents presented to these audience? Do I need a lot of presentation or graphics to pleased my audience? I need my webpage to download quickly? </span></li>
<li><span style="font-family: Georgia;">Plan how many pages you will produced for your website. How will I organize my webpages? Do I need to do it the way my visitors could access or explore my webpages easily? </span></li>
<li><span style="font-family: Georgia;">Have a draft or sketch of your website.</span></li>
<li><span style="font-family: Georgia;">Ensure that you name your pages, images and other external files in a simple way.</span></li>
</ol><span style="font-family: Georgia;">Here are important tips that you need to consider while working with your own website:</span><br />
<ul><li><span style="font-family: Georgia;">You don't need to overdo the design of your site. You have to dig in and start writing the content of your site.</span></li>
<li><span style="font-family: Georgia;">If are still unaware for other important things you need to know about a web, just get to surf with other web like your competitors to get an idea.</span></li>
<li><span style="font-family: Georgia;">Read other source of information like books available in your bookstore. Be sure that contents will fit your needs while learning HTML.</span></li>
</ul><br />
<span style="font-family: Georgia, "Times New Roman", serif;">While exploring yourself in learning HTML, I suggest that you also need to explore editing the test web that will be presented on my next post. I will present to you on how to create a new web page that you may use during your practice. You may also want to use our Practice HTML Editor during presentation of topics.</span><br />
<br />
<span style="font-family: Georgia;">You don't have to missed my next post because I will start presenting to you the basic HTML. </span>Donny Salazarhttp://www.blogger.com/profile/09758260433394915218noreply@blogger.comtag:blogger.com,1999:blog-5410101710017980422.post-31247750791746918512010-08-07T18:24:00.001+08:002010-08-07T18:28:55.710+08:00Understanding HTML<span style="font-family: Georgia, "Times New Roman", serif;">On my last post I just imparted you how I handled my first encounter about HTML. Today, I will share to you what an HTML really meant as well as its function in the world of internet.</span><br />
<br />
<h2>What is HTML?</h2><br />
<span style="font-family: Georgia, "Times New Roman", serif;">HTML means <strong>Hyper Text Markup Language</strong>. It is not considered as programming language since programming language is usually refers to a high-level languages like BASIC, C, C++, COBOL, FORTRAN, Ada, Pascal wherein HTML does not belong to these. </span><br />
<h2></h2><br />
<span style="font-family: Georgia;">HTML is used for website creation wherein anyone can access the information if you are connected to the internet. HTML is being maintained by <a href="http://www.w3.org/">W3C</a> and make revisions based on the growing demand in the world of internet. Currrently, we have a new revision and that is HTML 5. </span><br />
<br />
<span style="font-family: Georgia;">Since, we mentioned that HTML is not a programming language, it is called the markup language. A markup language is a set of symbols for describing the identity of pieces of documents ( e.i. heading, body, footer, etc...). These are also called the markup tags wherein HTML used this to described a webpages.</span><br />
<br />
<br />
<h2>What is Markup Tags?</h2><br />
<span style="font-family: Georgia, "Times New Roman", serif;">Markup tags is the fundamental characteristics of HTML. It is also called HTML tags. It is a command placed between the angle brackets < ( left bracket), > (right bracket). It normally come in pairs like <h1> and </h2>. This is what it means:</span><br />
<ul><li><span style="font-family: Georgia, "Times New Roman", serif;"><h1> is called the start tag or the first tag. Also called the opening tag.</span></li>
<li><span style="font-family: Georgia, "Times New Roman", serif;"></h1> is called the end tag or the second tag. Also called the closing tag.</span></li>
</ul><span style="font-family: Georgia, "Times New Roman", serif;">You will learn more tags on my succeeding post and I will impart to you how it works and you will experience it by using my very own tool ( the Practice Editor ). </span><br />
<br />
<span style="font-family: Georgia;">I had mentioned about a webpages on my <a href="http://guideforhtml.blogspot.com/2010/08/first-encounter-with-html.html">previous post</a>. Well, a webpages is also called an HTML document which consists of HTML tags and plain text. Just always remember that. If you have plan to take the certification, that concept will expect to exist in your exams.</span><br />
<br />
<span style="font-family: Georgia, "Times New Roman", serif;">Before I end up this post, I will give you the basic parts of the webpage. These are:</span><br />
<ul><li><span style="font-family: Georgia;"><html>, </html> ---> the text between these tags describes the webpage.</span></li>
<li><span style="font-family: Georgia;"><h1>, </h1> ---> the text between these tags describes the heading.</span></li>
<li><span style="font-family: Georgia;"><body>, </body>---> the text between these tags describes the main content of the webpage.</span></li>
<li><span style="font-family: Georgia;"><p>, </p> ---> the text between these tags describes every paragraph which is also part of the visible content of the webpage.</span></li>
</ul><span style="font-family: Georgia;">These are common tags that you will always encounter when creating a webpage. How to illustrates these tags? That will be imparted to you on my next post in this HTML tutorial blog version.</span><br />
<br />
<span style="font-family: Georgia;">Always stay tune here at HTML for Beginners...</span>Donny Salazarhttp://www.blogger.com/profile/09758260433394915218noreply@blogger.comtag:blogger.com,1999:blog-5410101710017980422.post-175497508570259952010-08-07T15:32:00.002+08:002010-08-07T15:43:46.659+08:00First Encounter With HTML<span style="font-family: Georgia, "Times New Roman", serif;">Internet is now a famous way of communication, access information, business and even source of learning. There are many things we can learn in the internet. But one of these learning that I would like to impart with you is about HTML or the Hyper Text Markup Language. What is meant by this topic would be the next content of this blog. </span><br />
<br />
<span style="font-family: Georgia, "Times New Roman", serif;">During my first encounter with HTML, it was really humiliating. I do not know how to start with and even don't know how to apply each tags in creating a webpages. The first step I made is to find for a perfect reference of HTML and thank God there is <a href="http://www.w3schools.com/" target="_blank">W3Schools </a>where I started to learn those tags and elements in order to start creating my own webpages. </span><br />
<br />
<span style="font-family: Georgia;">The learning process for HTML is just easy. It is not difficult compared to what I've thought it was hard like a hell engineering mathematics, but I was wrong. I just made a systematic schedule for myself in order to feed the concepts of HTML and understand what really meant by each tags being used when creating a webpages. I just finally come up to an end that it was really easy to understand when proper strategies are applied. I will share you those strategies I made as we go along with this HTML blog series of tutorial. I will not stop making this blog and make a research about the latest application of HTML. I promised myself that this blog will be the reliable and complete reference for beginners.</span><br />
<br />
<span style="font-family: Georgia;">I'm sure that your first encounter with HTML would be a bit difficult for you especially for those beginners and have no idea in creating a webpages. But if you are a web developer already, this will be a perfect reference for you especially if you are looking for something new. </span><br />
<br />
<span style="font-family: Georgia;">I hope that this series of HTML tutorial in blog version would be a great help and guide for you. </span><br />
<br />
<span style="font-family: Georgia;">More on HTML for Beginners... </span>Donny Salazarhttp://www.blogger.com/profile/09758260433394915218noreply@blogger.com