Learning to Code as I learn, Volume 1 Issue 1 Date First Reviewed 12th June 2013
Learning to Code as I learn, Volume 1 Issue 1 Date First Reviewed 12th June 2013
HTML
HTML is a ubiquitous language used on any site we visit, like English it has rules and formats. Yet how many of us browse to a webpage and enjoy the functionality it offers without understanding remotely how that content is presented to us? A great website, among many, I have found that offers practical advice is w3schools.com.
Now whilst this site has many tips and stuff it does not really give practical examples, and perhaps fill in some questions you may have about HTML code and how you do certain things, step forward me. I am going to try and explain stuff I learn as I learn it and stuff I have wanted to do and did not know how. Some people have told me that, for certain things, I have a great ability to describe simply how something works, and limitations etc whilst also sometimes getting bogged down in great depth if needed; that I am able, somewhat, to tailor my information to the audience I am presented with.
I do make the assumption that everyone is intelligent, assume your peers have infinite intelligence but zero knowledge is what one great lecturer mentioned in a lecture that sticks in mind. My background is not computing so I hope that also helps me think like the average person out there.
Without further waffle let’s begin.
How do you type in bold using HTML code?
Very simply you write <b> TEXT TO BE IN BOLD IS WRITTEN IN HERE </b> (1). Now you will have noticed I used this “<” sign. What happens if a person does not know how to make that sign? I will tell you how you press the shift key (it is the one with an upwards facing arrow to the right of the “?/” key on the right side of the keyboard and is also denoted by the same symbol on the left hand side of the keyboard where it sits above the key marked “Ctrl” (short for control) and below the key “CAPS LOCK”
What is the syntax of the language?
Firstly in case you did not know what syntax means, it means the rules used to construct a sentence for example in English you should never use a split infinitive (although I do not know what this is…) similarly so too does any coding language use Syntax. This first example I give includes the most basic element of HTML code the “<X>” and “</X> tags which are known as the “tags”1 These tags include numerous instructions about how information is to be presented to the reader. The X above is called the tag 1 in this case the tag is the instruction to make the text contained within the tags bolded. Most tags are written in the format <X> Information </X> where the /X tells the webpage to stop applying whatever tag X is to the information contained within the tags.
Some More Tags
1. Links; to include a link you use the following format where the information following the “a href=” part is whatever site you want to link to.
<a href="Your Website Here.com">This is a link</a> ( 1)
Note In the above example the information above will be presented to the viewer of the website as “this is a link” written in whichever colour is designated by the CSS code (a much more advanced topic for another day) as the hyperlink colour, it links to the whichever site a user puts in quotation marks . Often the default hyperlink colour is blue.
2. The Tag <p> Text </p> Creates a new paragraph1
3. The Tag <h1> Grizzly Bear Conquers America </h1> Creates a heading note a number 1 to 6 follows the heading tag which designates the size of the heading where 1 is largest and 6 is smallest heading (1& 5). Note there are more complicated ways to present headings which present a more precise control over the size using the more usual 8pt to 72pt scale seen in products like Microsoft Word.
4. An Image tag is presented in the format:
<img src="w3schools.jpg" width="104" height="142"> (1)
There are other ways to present image tags but in this format the Width and Height of the image must be included. Notice this is an exception to the syntax of all tags requiring a “/x” ending to finish them and instruct the site to stop applying whatever change that is denoted by “X” to the presented information.
Intermediate Tags 1
Ok so you want to use these basic tags to do something a little more fancy, say have a promotional banner of your shops website with the link to your website behind the eye catching “all shoes 50% off” banner you have displayed. Well you’re in luck. You need to nest your code instructions
First you use the <a href = “Your site Here.com”> next instead of typing text you use the <img src="w3schools.jpg" width="104" height="142">1 command and finally you write </a>
Now what you will have is a hyper linked image, where whatever image you have chosen links to whatever website you wrote after the “a href=” command. Simple or what?
Making your First Web Page and Editors
There are a few more things you need to know that just tags, that is webpages are made in things called editors, some fancy ones are adobe Dreamweaver and Microsoft Expression Web2. But a simpler one is notepad and this comes free with any Windows PC. Access Via Start> All programs> Accessories> Note pad or type notepad into the search panel of the Microsoft Windows. You need to tell notepad what the document type is so you type <!DOCTYPE html> <html> <body> before using the other commands2.
So in my example I use <h1> HELLO WORLD </h1> <p> I ate in the sink, before eating grandma’s < b> poo </b> </p> </body>. Sent to the mental institute is just what I do. </body> </html> (2)
As shown here the last thing in an html page should normally be the command </html> to tell the application to stop looking for html code. Finally, you should save this example I give in note pad as either .htm or .html both are fine (I prefer.html), then, once you have saved the file go to either Google Chrome or Internet Explorer and use the file open command before browsing to the file, or you can just browse to the file in Windows Explorer (that’s the default windows environment you use every day) and click it2. Included here is my example file for proof that saving as html works, note if notepad only gives you the option to save as “all file type” then just save it as that but name the file “yournamehere.html” in the file name path, this makes it html automatically.
MORE HTML MADNESS
Now comes the slightly dry topics of html tags, elements and attributes. An html element is everything between the start html tag and end html tag3. The element follows the syntax of a start tag, content (everything between the start and end tag), closing tag. Html elements may have empty content and some elements are close in the start tag. Html elements can have a property known as an attribute. An attribute is a property of an element which confers additional information about a given element (4).They are always specified in the start tag (4).They come in property/value pairs like property=”value” (4). Before we mentioned how to include links to websites in HTML code, we said we use the <a href=“Yoursite here.com”> The name of your site or description here </a> code to do so. The href part of the <a> tag is the tags attribute. Attribute values should always be in quotation marks, usually double however if your attribute value contains quotation marks then it should be quoted with single quotation marks instead.
Most Html elements can be nested (that means fitted within other HTML elements), webpages are composed of nested HTML elements.(3) HTML elements with no content between the start and end tags are called “empty elements” (3). An example is <br> which is an empty element without a closing tag; it inserts a line break in the document. Note in XHTML and XML all elements must be closed with a closing tag, which can be done by using the following command for empty elements <br/> (3).
For more information on attribute references see w3 schools screen shot below (4):
Use the head
Search engines use your websites headings for indexing and categorising purposes so don’t use headings to make text big or bold (5)! Comments can be added to an HTML document to make the code more understandable to the programmer, these are added using the following tag syntax:
<! -- This is a comment --> (5). These are ignored by web browser and do not appear to the end user (5).
How to View HTML SOURCE code for any website
In internet explorer simply right click the webpage and select view source, this is a handy way to see how HTML is actually implemented in real sites and is a faster way to learn new HTML and other code for more advanced users (5).
More cool stuff
Finally, you can get lines in your page using the following empty element: <hr>, just type it where you want a line (5). The Web Browser also automatically adds an empty line before and after each paragraph. If you want a new line without starting a new paragraph use the <br> empty element for a line break within the same paragraph6. Text formatting is out with the scope of this issue, but in issue 2 we will do a quick recap of what we have covered here and then go onto such topic as formatting, images, lists and blocks. If you would like to read ahead please Visit : http://www.w3schools.com/html/html_formatting.asp
References
1. http://www.w3schools.com/html/html_basic.asp
2. http://www.w3schools.com/html/html_editors.asp
3. http://www.w3schools.com/html/html_elements.asp
4. http://www.w3schools.com/html/html_attributes.asp
5. http://www.w3schools.com/html/html_headings.asp
6. http://www.w3schools.com/html/html_paragraphs.asp
Learning to Code as I learn, Volume 1 Issue 1 Date First Reviewed 12th June 2013
HTML
HTML is a ubiquitous language used on any site we visit, like English it has rules and formats. Yet how many of us browse to a webpage and enjoy the functionality it offers without understanding remotely how that content is presented to us? A great website, among many, I have found that offers practical advice is w3schools.com.
Now whilst this site has many tips and stuff it does not really give practical examples, and perhaps fill in some questions you may have about HTML code and how you do certain things, step forward me. I am going to try and explain stuff I learn as I learn it and stuff I have wanted to do and did not know how. Some people have told me that, for certain things, I have a great ability to describe simply how something works, and limitations etc whilst also sometimes getting bogged down in great depth if needed; that I am able, somewhat, to tailor my information to the audience I am presented with.
I do make the assumption that everyone is intelligent, assume your peers have infinite intelligence but zero knowledge is what one great lecturer mentioned in a lecture that sticks in mind. My background is not computing so I hope that also helps me think like the average person out there.
Without further waffle let’s begin.
How do you type in bold using HTML code?
Very simply you write <b> TEXT TO BE IN BOLD IS WRITTEN IN HERE </b> (1). Now you will have noticed I used this “<” sign. What happens if a person does not know how to make that sign? I will tell you how you press the shift key (it is the one with an upwards facing arrow to the right of the “?/” key on the right side of the keyboard and is also denoted by the same symbol on the left hand side of the keyboard where it sits above the key marked “Ctrl” (short for control) and below the key “CAPS LOCK”
What is the syntax of the language?
Firstly in case you did not know what syntax means, it means the rules used to construct a sentence for example in English you should never use a split infinitive (although I do not know what this is…) similarly so too does any coding language use Syntax. This first example I give includes the most basic element of HTML code the “<X>” and “</X> tags which are known as the “tags”1 These tags include numerous instructions about how information is to be presented to the reader. The X above is called the tag 1 in this case the tag is the instruction to make the text contained within the tags bolded. Most tags are written in the format <X> Information </X> where the /X tells the webpage to stop applying whatever tag X is to the information contained within the tags.
Some More Tags
1. Links; to include a link you use the following format where the information following the “a href=” part is whatever site you want to link to.
<a href="Your Website Here.com">This is a link</a> ( 1)
Note In the above example the information above will be presented to the viewer of the website as “this is a link” written in whichever colour is designated by the CSS code (a much more advanced topic for another day) as the hyperlink colour, it links to the whichever site a user puts in quotation marks . Often the default hyperlink colour is blue.
2. The Tag <p> Text </p> Creates a new paragraph1
3. The Tag <h1> Grizzly Bear Conquers America </h1> Creates a heading note a number 1 to 6 follows the heading tag which designates the size of the heading where 1 is largest and 6 is smallest heading (1& 5). Note there are more complicated ways to present headings which present a more precise control over the size using the more usual 8pt to 72pt scale seen in products like Microsoft Word.
4. An Image tag is presented in the format:
<img src="w3schools.jpg" width="104" height="142"> (1)
There are other ways to present image tags but in this format the Width and Height of the image must be included. Notice this is an exception to the syntax of all tags requiring a “/x” ending to finish them and instruct the site to stop applying whatever change that is denoted by “X” to the presented information.
Intermediate Tags 1
Ok so you want to use these basic tags to do something a little more fancy, say have a promotional banner of your shops website with the link to your website behind the eye catching “all shoes 50% off” banner you have displayed. Well you’re in luck. You need to nest your code instructions
First you use the <a href = “Your site Here.com”> next instead of typing text you use the <img src="w3schools.jpg" width="104" height="142">1 command and finally you write </a>
Now what you will have is a hyper linked image, where whatever image you have chosen links to whatever website you wrote after the “a href=” command. Simple or what?
Making your First Web Page and Editors
There are a few more things you need to know that just tags, that is webpages are made in things called editors, some fancy ones are adobe Dreamweaver and Microsoft Expression Web2. But a simpler one is notepad and this comes free with any Windows PC. Access Via Start> All programs> Accessories> Note pad or type notepad into the search panel of the Microsoft Windows. You need to tell notepad what the document type is so you type <!DOCTYPE html> <html> <body> before using the other commands2.
So in my example I use <h1> HELLO WORLD </h1> <p> I ate in the sink, before eating grandma’s < b> poo </b> </p> </body>. Sent to the mental institute is just what I do. </body> </html> (2)
As shown here the last thing in an html page should normally be the command </html> to tell the application to stop looking for html code. Finally, you should save this example I give in note pad as either .htm or .html both are fine (I prefer.html), then, once you have saved the file go to either Google Chrome or Internet Explorer and use the file open command before browsing to the file, or you can just browse to the file in Windows Explorer (that’s the default windows environment you use every day) and click it2. Included here is my example file for proof that saving as html works, note if notepad only gives you the option to save as “all file type” then just save it as that but name the file “yournamehere.html” in the file name path, this makes it html automatically.
MORE HTML MADNESS
Now comes the slightly dry topics of html tags, elements and attributes. An html element is everything between the start html tag and end html tag3. The element follows the syntax of a start tag, content (everything between the start and end tag), closing tag. Html elements may have empty content and some elements are close in the start tag. Html elements can have a property known as an attribute. An attribute is a property of an element which confers additional information about a given element (4).They are always specified in the start tag (4).They come in property/value pairs like property=”value” (4). Before we mentioned how to include links to websites in HTML code, we said we use the <a href=“Yoursite here.com”> The name of your site or description here </a> code to do so. The href part of the <a> tag is the tags attribute. Attribute values should always be in quotation marks, usually double however if your attribute value contains quotation marks then it should be quoted with single quotation marks instead.
Most Html elements can be nested (that means fitted within other HTML elements), webpages are composed of nested HTML elements.(3) HTML elements with no content between the start and end tags are called “empty elements” (3). An example is <br> which is an empty element without a closing tag; it inserts a line break in the document. Note in XHTML and XML all elements must be closed with a closing tag, which can be done by using the following command for empty elements <br/> (3).
For more information on attribute references see w3 schools screen shot below (4):
Use the head
Search engines use your websites headings for indexing and categorising purposes so don’t use headings to make text big or bold (5)! Comments can be added to an HTML document to make the code more understandable to the programmer, these are added using the following tag syntax:
<! -- This is a comment --> (5). These are ignored by web browser and do not appear to the end user (5).
How to View HTML SOURCE code for any website
In internet explorer simply right click the webpage and select view source, this is a handy way to see how HTML is actually implemented in real sites and is a faster way to learn new HTML and other code for more advanced users (5).
More cool stuff
Finally, you can get lines in your page using the following empty element: <hr>, just type it where you want a line (5). The Web Browser also automatically adds an empty line before and after each paragraph. If you want a new line without starting a new paragraph use the <br> empty element for a line break within the same paragraph6. Text formatting is out with the scope of this issue, but in issue 2 we will do a quick recap of what we have covered here and then go onto such topic as formatting, images, lists and blocks. If you would like to read ahead please Visit : http://www.w3schools.com/html/html_formatting.asp
References
1. http://www.w3schools.com/html/html_basic.asp
2. http://www.w3schools.com/html/html_editors.asp
3. http://www.w3schools.com/html/html_elements.asp
4. http://www.w3schools.com/html/html_attributes.asp
5. http://www.w3schools.com/html/html_headings.asp
6. http://www.w3schools.com/html/html_paragraphs.asp
RSS Feed