HTML hints & tips.
Here you'll find some hints and tips that will help you with the first assignment in your Dreamweaver course. Take the time to read these pages.
- Background Colour
- Image Filename
- Tags & Attributes
When looking for the background color for the page, depending on whether the page has been designed with CSS styles or HTML styling, look for "body {" followed by "background-color" in the css code or "<body" followed by "bgcolor=" in the main code to find the background color of the page.
The "body" element in css code denotes the style to be applied to the "body tag".
Remember an image is a file, so it will have a file extension as would a setup file or an application file.
Images on the web are usually of the .gif, .jpg variety.
So an example of an image name would be "my-image.gif"
This could look like this in source code;
"some-domain.com/1st-folder/2nd-folder/3rd-folder/my-image.gif"
But in the code above the only part that is the actual image name is the last part following the last forward slash "my-image.gif" the rest preceding this, is called the "path" to the image and this gives the browser a sort of map to find the image file. This enables the browser to locate the file and display it.
Remember a tag always starts with the angle bracket '<'.
A tag can also have attributes, these, if assigned, will always be between the tags angle brackets. I.E '<table width="100%" border="1">
Notice how the attribute is between the angle brackets of the tag.
The makeup of the code is: '<tag attribute="value">' Multiple attributes can be assigned to a tag.
Tip: Try using the search function within notepad to search for key words within the source code.
- Basic Tags
- Links and Images
- Table Attributes
- Font Attributes
- Format Tags
| <html></html> | Document Type | Start & finish HTML tags. Situated at the beginning and end of the document. |
| <head></head> | Head tag | Contains other hidden information regarding the site. |
| <style></style> | Style | style tag (embedded CSS styles). |
| <title></title> | Title | Appears in the browser title bar. situated in between the header tags. |
| <body></body> | Body | Surrounds the main body of the page. |
| <span></span> | Span | makes an invisible block; used for applying CSS or alignment to small amounts of text. |
| <div></div> | Div | Makes a container; Is styled with CSS stylesheet.. |
| <a href="***"></a> | makes a link to another page, anchor or file. "path/filename". |
| <img src="***" / > | places an image on the page. "path/filename". |
| <img src="***" width="? " height="?" / > | sets the dimensions of an Image. |
| <link rel="stylesheet" type="text/css" href="?.css" /> | Used to link to an external CSS style sheet. "path/stylesheet.css". situated in between the header start/finish tags. |
| <table border="?"> | The border attribute sets the border size. |
| <table width="?"> | The width attribute sets the table width. |
| <table cellpadding="?"> | The cellpadding attribute sets the padding inside cells. |
| <table cellspacing="?"> | The cellspacing attribute sets the spacing between cells. |
| <font size="?"></font> | Font Size | The size attribute. sets the font size |
| <font face="***"></font> | Font Face | The face attribute. sets the typeface to be use (can be a list). |
| <font color="***"></font> | Font Color | The colour attribute. use color name or color code (#ffffff or white). |
| <font style="font-size:?;"></font> | Font Size CSS | The inline style attribute. Used for changing font size, face etc. |
| <br /> | Line Break | start a new line. (line break). |
| <p></p> | Paragraph | starts a new line and skips a line (paragraph). |
| <hr /> | Horizontal Rule | makes a horizontal line (horizontal rule). |
| <center></center> | Center | Everything between this tag will be centered. |
| <strong></strong> | Strong | Everything between this tag will be bold. |