Showing posts with label html. Show all posts
Showing posts with label html. Show all posts
Monday, January 26, 2015
HTML Basics
The 3 MAIN tags in your web page are the HTML, HEAD and BODY tags. Here is a basic outline explaining how they should be placed in your web page document:
<html>
<!-- The tag you see above is the START HTML tag. It tells the browser that this is the beginning of your HTML document.
What goes inside the HTML tags? All the other tags! -->
<head>
<!--
The START HEAD tag is added after the START HTML tag.
What goes inside the HEAD tags? Generally, what you place inside the HEAD tags are things that you DON’T want displayed on the browser window. Examples of these are your HTML titles, some JavaScript code and Internal Style Sheets.
-->
</head>
<!-- You must type the END HEAD tag first, before you type the START BODY tag -->
<body>
<!-- The START BODY tag defines the start of the webpage’s body. The webpage’s body is what you see in your browser’s main window whenever you are viewing a webpage. Examples of tags that can be placed inside the BODY tags are: paragraph tags (<p></p>), image tags (<img />), line-break tags (<br />), first heading tags (<h1></h1>), and many more… -->
</body>
<!-- The END BODY tag defines the end of your webpage’s body. -->
</html>
<!-- The END HTML tag is placed at the end of the document. This tells the browser that this is the end of the web page. -->
EXAMPLE:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>This is a paragraph.</p>
<img src="myphoto.jpg" />
<p>This is another paragraph. <b>This text is bold.</b></p>
<p>How are you? <i>This text is italicized.</i> Have a nice day!</p>
<a href="page02.html">next page</a>
</body>
</html>
Writing HTML Tags
Most HTML tags come in pairs: a START tag and an END tag.
Example:
<p>This is a paragraph</p>
START tag: <p>
END tag: </p>
Tags are enclosed in ANGLE BRACKETS: < and >
The END tag is just like the START tag except that a backslash - / - immediately follows the open angle bracket - < .
Some HTML tags DO NOT come in pairs. Examples of these are:
<br /> - inserts a line-break
<hr /> - inserts a horizontal line
<img /> - inserts an image
HTML Tag Attributes
HTML tags can have attributes.
What are attributes?
Attributes are add-ons to your HTML tags that allow you to provide additional information or set additional properties to your HTML elements.
Example:
<body bgcolor="blue">
The tag attribute in this example is bgcolor="blue" . It tells the browser that the background color of the web page should be blue.
Attributes always come in name and value pairs: name="value".
The "value" should be enclosed in quotation marks.
Attributes are ALWAYS added to the START tag. NEVER add attributes to the END tag.
One HTML tag can have two or more attributes.
Example:
<a href="page02.html" style="color:green">next page</a>
The attributes in this example are:
href="page02.html" – this tells the browser which page the link should open
style="color:green" – this tells the browser that the color of the text link should be green
Read more »
<html>
<!-- The tag you see above is the START HTML tag. It tells the browser that this is the beginning of your HTML document.
What goes inside the HTML tags? All the other tags! -->
<head>
<!--
The START HEAD tag is added after the START HTML tag.
What goes inside the HEAD tags? Generally, what you place inside the HEAD tags are things that you DON’T want displayed on the browser window. Examples of these are your HTML titles, some JavaScript code and Internal Style Sheets.
-->
</head>
<!-- You must type the END HEAD tag first, before you type the START BODY tag -->
<body>
<!-- The START BODY tag defines the start of the webpage’s body. The webpage’s body is what you see in your browser’s main window whenever you are viewing a webpage. Examples of tags that can be placed inside the BODY tags are: paragraph tags (<p></p>), image tags (<img />), line-break tags (<br />), first heading tags (<h1></h1>), and many more… -->
</body>
<!-- The END BODY tag defines the end of your webpage’s body. -->
</html>
<!-- The END HTML tag is placed at the end of the document. This tells the browser that this is the end of the web page. -->
EXAMPLE:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>This is a paragraph.</p>
<img src="myphoto.jpg" />
<p>This is another paragraph. <b>This text is bold.</b></p>
<p>How are you? <i>This text is italicized.</i> Have a nice day!</p>
<a href="page02.html">next page</a>
</body>
</html>
Writing HTML Tags
Most HTML tags come in pairs: a START tag and an END tag.
Example:
<p>This is a paragraph</p>
START tag: <p>
END tag: </p>
Tags are enclosed in ANGLE BRACKETS: < and >
The END tag is just like the START tag except that a backslash - / - immediately follows the open angle bracket - < .
Some HTML tags DO NOT come in pairs. Examples of these are:
<br /> - inserts a line-break
<hr /> - inserts a horizontal line
<img /> - inserts an image
HTML Tag Attributes
HTML tags can have attributes.
What are attributes?
Attributes are add-ons to your HTML tags that allow you to provide additional information or set additional properties to your HTML elements.
Example:
<body bgcolor="blue">
The tag attribute in this example is bgcolor="blue" . It tells the browser that the background color of the web page should be blue.
Attributes always come in name and value pairs: name="value".
The "value" should be enclosed in quotation marks.
Attributes are ALWAYS added to the START tag. NEVER add attributes to the END tag.
One HTML tag can have two or more attributes.
Example:
<a href="page02.html" style="color:green">next page</a>
The attributes in this example are:
href="page02.html" – this tells the browser which page the link should open
style="color:green" – this tells the browser that the color of the text link should be green
Saturday, January 24, 2015
Another Gotcha this time in HTML
I couldnt resist another dorky software engineering post. Non dorks may stop reading here.
At work the other day, while debugging my code, I noticed that one of my servlets was getting called twice for each page load. What was even more mysterious was that the second call would happen as the page was partially loaded. I scoured my code for iframes, accidental use of the servlet, rouge AJAX calls and so on, but couldnt find a thing. I resorted to just commenting out huge chunks of the page at a time to see which parts were causing the second page load. After a while, I narrowed it down to this:
<img src="$imgUrl" />
where $imgUrl is a variable whos value is filled in at runtime. So, you might be wondering how the heck an img tag can cause the entire page to reload? Well, it turns out (at least in Firefox 3) that if you have an img tag with a blank src attribute, the browsers tries to load an image at your base URL - that is, the URL of the page youre on. Therefore, every time $imgUrl turned out to be blank, my browser would re-request the page I was on. This, of course, caused a bad performance hit, was screwing up statistics and so on.
Moral of the story: make sure that your img tags never have an empty src attribute.
Read more »
At work the other day, while debugging my code, I noticed that one of my servlets was getting called twice for each page load. What was even more mysterious was that the second call would happen as the page was partially loaded. I scoured my code for iframes, accidental use of the servlet, rouge AJAX calls and so on, but couldnt find a thing. I resorted to just commenting out huge chunks of the page at a time to see which parts were causing the second page load. After a while, I narrowed it down to this:
<img src="$imgUrl" />
where $imgUrl is a variable whos value is filled in at runtime. So, you might be wondering how the heck an img tag can cause the entire page to reload? Well, it turns out (at least in Firefox 3) that if you have an img tag with a blank src attribute, the browsers tries to load an image at your base URL - that is, the URL of the page youre on. Therefore, every time $imgUrl turned out to be blank, my browser would re-request the page I was on. This, of course, caused a bad performance hit, was screwing up statistics and so on.
Moral of the story: make sure that your img tags never have an empty src attribute.
Subscribe to:
Posts (Atom)