Archives for category: Project 4
After planning which pages I would need on the site and how they would link together I started working out the layouts in Photoshop. When I had decided on most of the images I cropped them as I wanted them in Photoshop and optimised them for the web by saving for Web and devices. Most of the images I saved as jpegs but for those I had used in a polaroid background I saved as PNGs as I wanted to keep the transparency where I had added a drop shadow. We did get quickly shown how to do this in CSS3 but when I came to try, it seemed easier to stick with what I had already done. The pictures I used throughout the site as polaroids I also posterized in Photoshop to give them more of a fun feel and to be in keeping with the vector background.
I thought I would stick with the signpost idea that I had tried in Illustrator using the Live Trace mode. I changed the colours slightly of the sky to make it look a bit brighter, and put a gradient on the bottom so that it faded to white when scrolled right down. It wasn’t until I had put it into Dreamweaver that I realised I would have to separate the sky from the signpost so that the signpost would remain in one place on my Home page.
To begin with I made a Main folder with an overall project name for my site. Inside that I put a folder called ‘Original Docs’ with sub-folders ‘Original Text’ and ‘Original Images’. I put in a folder for my Photoshop PSDs, with subfolders called ‘Test’ and ‘Real’. Then a folder called Real Website which would be the folder for all my web pages, website images, CSS and Javascript files. No other files must go into this. After creating the folders for my site, I decided to put in the navigation and the logo and added them to the five pages I had saved and copied, linking the text navigation on all the pages.
To begin with the program was hard to work with as it is so different from any other program I have used. For instance, it took a while to work out that by copying over the AP DIVS that I had drawn for the index page meant that everything I did when moving them or putting images in the background would appear on all the pages!
I started to add the pictures that I thought were appropriate to give the home page a friendly, fun look and feel but also trying to show at a glance what the site was about. Walking, dogs and partners. The target audience I was trying to attract to the site was really quite large. Any age group or sex that could walk and who loved dogs. I have tried to include photos of all age groups, young and older enjoying being outdoors.
When first looking at the about page I thought I would use a large vector image on each page, but in the end decided that I needed to have a lot of ‘happy people and dog’ shots to put over the idea of the site properly.
I decided to put Real life stories on the About page with pictures of the couples who had been brought together by their dogs. I linked their names underneath their photos using named anchors. These linked to a specific place where they were telling their story in the text. I also used a link at the top, to the text ‘Back to top’ within the text where each couple ended their story.
I put hot spots on the pictures on the Home page to link to the About page where more could be found out about the people in the pictures.
I also added a You Tube video to this page that I found ‘Walking the Dog – Beginner’s Luck – Gershwin’. This is about a man who borrows someones dog to walk, and use to get to know a beautiful girl he is trying to find an excuse to talk to! To do this the code from under the video on the You Tube page was put into the HTML code in the position that the video was wanted on the page.
I decided to use the coloured panel I had used for the navigation to tie the pages together. I put the times and days of the organised walks within this panel. I linked the name of each walk to the maps page so the visitor can get more information.
When I started putting these pages together in Dreamweaver the fact that such things happened as, the images that were put into the Divs would suddenly appear on a different part of the page was very irritating and confusing. After a while it did become easy to look at the code and see where the problem was, and where the code for the image, for instance should be put. Quite often things would have to be put back inside the wrapper. Another thing that was very useful to get to know when using the AP DIVs was the Z -Index, how high the item was within the stack. 
Until I got used to the layers, code and divs, putting these pictures together on the maps page became very frustrating because I couldn’t get them to behave as I wanted. I tried using a table but couldn’t get rid of the borders, which I didn’t want. After a while when Dreamweaver started to sink in a bit more I redid the page and got the effect I was after! I used pop up windows on the page to show larger images of the walks. To begin with this opened up behind my web page, which meant that the ‘close’ button didn’t work, and my web page showed over the top. This was corrected by opening the Slimbox CSS file and putting in the missing Z-index on the overlay. z-index:9999; was typed into the code and it then opened correctly. This meant the pop up box was in the highest layer. Also on this page I put links to PDFs of maps. There is one for each walk that can be opened and printed off if required.
I also put a link to another website which had different walks and information for people wanting to know the best places to go with a dog.
On the contact page I put a form which we experimented with in a class workshop. It included fields for name, address, age, and email address. Check boxes for gender and a drop down menu for how many dogs were owned. We also put in a Submit button where we had to put the email address we wanted the form to go to in the PHP Process form.
There is also a link on this page to an email address for anyone who would like more information. I used a text link for this using a font that I had downloaded from Font Squirrel. We had to define the rule, calling the font “font-family”.
@font-face {
font-family: ‘JournalRegular’;
src: url(‘journal-webfont.eot?’) format(‘eot’),
url(‘journal-webfont.woff’) format(‘woff’),
url(‘journal-webfont.ttf’) format(‘truetype’),
url(‘journal-webfont.svg#webfontKxGpfKgK’) format(‘svg’);
font-weight: normal; font-style: normal;
I also added an MP3 file to this page. I didn’t want the skin to open up on a completely new page so I changed the behaviour by going to window>behaviours. Clicking on add behaviour> open browser window, browse to the MP3 file and put in the required measurements of the bar.
I designed a Favicon in Photoshop 32 pixels square to begin with. I used the vector image of the signpost from the Home page. I used the Dynamic Drive website to generate the icon and put it into the web folder. It won’t be visible on the page until the site has been uploaded.
In the HTML code I put the title which will show in the browser window and meta tags for the description and the keywords, used by the browser to find your page.
I have tested the site in Safari, Firefox on the Mac and Internet Explorer and Firefox on and PC. The only thing really that isn’t showing correctly in Safari where I added code to keep the visited links blue on the About page so that the ‘Back to top’ text could be seen, this also doesn’t show up in Explorer.
}
#main a:visited{
color:#33F;
In Internet Explorer the video doesn’t play, the MP3 or the pop up boxes for the pictures. The smooth scrolling doesn’t work either.
I have tested on monitor resolutions of 1024 x 768. On the smaller screen the website fits into the screen perfectly but with no background showing and with a need for a small half scroll down the page.
This is the Thank you page that a visiter will be taken to once the form on page five has been submitted.
Instead of using templates we looked at an alternative way to lay out our web pages in Dreamweaver, using AP DIVS. To start off we went to Site>New Site as usual and located where our file would be stored. We then created a blank page, File>New then blank – HTML – <none> and then create. We then drew the AP DIVS on the page, going to Layout, making sure we were in Standard, click the Draw AP DIV button, then drew on the page a div for the header, sidebar, footer and main content or whatever was needed. Each DIV must then be named by clicking on the top left corner of each DIV box and putting the name in the element box. We used the example below to start with.
I found using this method much simpler than using templates and so decided to use AP divs for my main site. It seemed much more flexible and easier to move things around on the page.
I started off thinking along the lines of an event for Labradoodles, mainly because we have just got our second one and I had heard of a yearly get together for these dogs a while ago. I also started looking at walkers sites and the benefits of dog walking. One of the things I always find amusing about dogs is there owners, and the way people interact when they have a dog.
People talk to you all the time when you have a dog. I did recently suggest to a single friend she should get one to increase her chances of meeting someone! This led me onto thinking about a dating site for dog owners especially as it is well known that Ben Fogle and Davina Macall met their partners while walking there dogs.
I found these articles about people meeting because of their dogs or wanting to meet someone because of their dog!
As I started looking I did find quite a few references to dogs bringing people together not only romantically but people also formed close friendships. I did find a couple of dating agencies for people with dogs one being www.petspartnersandpals.co.uk and a speed dating event for people with there dogs!
I started to think about what would go onto each page of my site and put together a rough page in Photoshop to make a start using images I had already. After looking at alot of walking, dating and doggy sites I thought most of them looked very messy and slightly dull. I really wanted my site to look lively, colourful and fun, so that any visitor to the site would not think the people using it were stereotypical walkers and doggy people!
I used the live trace option in Illustrator to turn some images I had into vector images which I thought could work for this sort of site.
I feel happier with this page although I need to find a good owner and dog picture to go in the corner. I would really like the navigation to drop down a bit like the example below but I’m not sure if we are going to be able to do that yet.
In this workshop we went through the same procedure to make a new website using images and text that were supplied. First of all we made a link to an email address. We put some text on the site that we wanted to act as the link to open the email window, highlighted this text then went to Insert> Common>Email link and put in mailto: and then the email address that we wanted to link to. We went to a web site to obfuscate the address. This gives you a code to insert into your page that will guard against spamming.
To add in a link to another web page we put in some text on the page that we wanted to act as the link to another page. In this case we put ‘Visit our other site’, highlighted this text then put the web page full URL address in the link box in the Properties panel. We made the website link open in a new window by choosing ‘blank’ from the target option on the Properties palette.
To link to another file and open it, such as a PDF, we put in some text to highlight, ‘download info here’ and used the point to file to point to the document in the files panel. This then opened the PDF in a separate window when the text was clicked.
We also put in a MP3 sound clip. We first went to Insert> Media> Plugin and chose the file we wanted to add.
We inserted an FLV or Flash video clip. These can be compressed and played on a variety of browsers without the need for video player plug-ins. We selected Insert> Media>FLV and browsed to the clip which we wanted to insert. We selected a skin style, which are the controls that are used to stop play and pause the video and entered the size we wanted the video to appear.
To insert the ‘You tube’ video we put the cursor on our DW page where we wanted it to appear. Went to the clip on ‘You tube’ that we wanted to insert. We clicked embed and copied the code into our DW page where the cursor was placed. Saved and tested in the browser.
In this workshop we again opened a new template in Dreamweaver. We put in the prepared header for the site and the supplied pictures following the same procedure as before. We added a new div tag for the navigation bar, put in the text ‘Home’, ‘UK News’ and ‘World News’ for navigation and linked the three pages. We went to ‘Modify’ – ‘page properties’ – ‘link styles’ to choose the appearance of the links. Here we could choose the colour of the type, the colour when the mouse rolled over the link and whether the link was underlined or not. After testing in the browser we added a long piece of text to the UK News page and some simple headings to the top of the page to link the text back to. We then added the ‘named anchors’.
Anchors are links which let a visitor link to another part of the same page or to a certain part or paragraph on another page as opposed to just linking to a whole page. For example they could be used to link a list of contents to certain related paragraphs on a long scrolling page or to enable a visitor to get back up to the top of the page if they had scrolled all the way to the bottom (ie. a ‘back to top’ link). This is what we did in the workshop.
We went to the ‘insert’ – ‘common’ then to the ‘named anchor’ button and typed a name in the anchor name field. An anchor then appeared where the cursor was placed. The text was highlighted where we wanted the link to go to. We then used the point to file button to point to the anchor.
We also added anchors to the headings in the text and linked them back to the text we had highlighted at the top. Now when tested in the browser the headings at the top take you down to the relevant piece of text and when you need to go back to the top the linked ‘back to top’ text takes you back to the top.
After looking at the source code for the photographers sites we started laying out our first simple site using a Dreamweaver template.
We created a folder on the computer, named it and payed particular attention to where the file was placed as DW has to have EVERYTHING in one folder.
We went to Site > New Site. Put a name for our site and under Local Root Folder navigated to our folder and selected it.
We then went to File > New and chose Blank Page > HTML > 2 column, fixed, left sidebar, header and footer. We made sure Layout CSS is set to Create New File, then clicked ‘Create’.
We wrote a name for our style sheet. It defaulted to twoColFixLtHdr.css but we renamed it styles.css (no caps, no spaces between words).
We opened our CSS styles palette and double clicked on the items we wanted to edit. The first thing we added was the header that we had created in Photoshop. We clicked header in the CSS styles panel, then under background – then background image, we clicked browse, then navigated to our header image.
We added a navigation panel by clicking the plus symbol for a new CSS rule, chose ‘class’ then a name which was #navbar. We made sure it was set to styles.CSS then ok. We could then choose the type and style, the panel size and colour and anything else we wanted to do.
We made three other pages calling them About, Gallery and Contact us, so that we could link the pages with the navigation bar. To do this we highlighted each navigation heading in turn on the index (home) page and with the ‘point to file’ button in the Properties panel we attached it to the corresponding page in the files panel. We then copied all the headings on the index page and pasted them onto each of the other three pages in the navigation bar so that the links were all copied over.
We then tested in a browser to check everything was working by selecting the preview in browser, globe button.
We added the gradient we had done in Photoshop and set it to repeat so that it would go on indefinitely when the page was scrolled down. We added images by either dragging them from the file panel or going to Insert-Image.
We put in a <title> for the site in the <head> section of the code, which was ‘northlaine,brighton,photography’. Then also in the <head> section we put meta tags for the keywords and the description.
For our first look at HTML we had to code a very simple piece of text, looking at page structure, paragraph text, font, size, colour, lists, unordered lists, adding a picture and linking to another page.
For the start of our second workshop we looked at the source code behind five of the sites that appeared first when searched in Google. I looked at Photographers in Brighton. One of the sites I looked at was James Pike Photography.
In the <head> there is information that is not displayed on the screen. This is used by the browsers or search engines and includes, for instance, the name of the page’s author, a copyright notice might be included in meta elements, keywords and description.
The <title> which is to appear in the browser toolbar, also provides a title for the page when added to favourites and displays a title in search engine results.
<title> James Pike – Commercial photographer, wedding photographer, Brighton, Sussex
The description meta tag describes the document.
<meta name=”description” content=”Brighton based freelance photographer, contemporary style, competitive rates.”>
A lot of people have used <meta> tags for spamming, such as repeating keywords for higher ranking. Most search engines have stopped using <meta> tags to index web pages because of this.
<meta name=”keywords” content=”freelance photographer, freelance, brighton, london, reportage wedding photography, reportage wedding photographer, uk wedding photographer, uk wedding photography, candid, modern, informal, relaxed, James Pike, freelance wedding photographer, Black and white photography, documentary wedding photographer, Brighton wedding photographer, southeast uk wedding photographer, Sussex wedding photographer, Sussex wedding photography, London wedding photographer, London wedding photography, Surrey wedding photographer, Surrey wedding photography, contemporary wedding photography, contemporary wedding photographer”>
James Pike seems to have put in quite a few keywords, well, he is near the top in Google.
In the <body> which is where everything is that we are able to see on the page, there are a lot of pictures and the site is layed out using tables. Here are some of the image tags with their <alt> text, which shows up when the mouse hovers over the picture and is also used if the image cannot be displayed because of slow connection or any other error.
a href=”index.htm”> <img src=”img/james_pike.gif” alt=”James Pike – freelance photographer Brighton” width=”304” height=”88” border=”0”></a></div></td>
a href=”commercial_photography.htm”><img src=”img/home_commercial_photography.jpg” alt=”commercial photography. Brighton”
a href=”weddingphotography.htm”><img src=”img/home_wedding_photography.jpg” alt=”wedding photography, Brighton, East Sussex”
a href=”events.htm”><img src=”img/home_event.jpg” alt=”Photography for advertising, in print”
HTML is short for HyperText Markup Language. It is not a programming language but a mark-up language. It’s a way of describing how a set of text and images should be displayed to the viewer, similar in concept to a newspaper editor’s markup symbols.
A markup language is a set of markup tags. HTML uses markup tags to describe web pages, it makes plain text look good and is the ‘code’ that’s behind every webpage.
HTML Documents = Web Pages
- HTML documents describe web pages
- HTML documents contain HTML tags and plain text
- HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
A Web page consists of an HTML file, plus any image (picture) files used on the page. The HTML file (a normal text file) contains all the text to display, and also acts as the ‘glue’ to hold the text and images together in the right places, and display them in the right style.
TAGS
Writing an HTML file means composing the text you want to display, then inserting any tags you want in the right places. Tags begin with a < character and end with a > character, and tell a browser to do something special, like show text in italic or bold, or in a larger font, or to show an image, or to make a link to another Web page.
HTML tags are keywords surrounded by the angle brackets like <html>.
They normally come in pairs, the first tag in a pair is the start or opening tag, the second tag is the end or closing tag.
It’s a good idea to view lots of source code. Viewing the source code of any page that makes you wonder how something was done is a good way to learn about HTML. Everyone can learn by reading other people’s HTML code.
Basic HTML code manipulates a plain text document to apply style and reference. It does so by applying these ‘tags’. A tag does nothing more than indicating a position or selection of the document, and specifying the kind of thing that needs to be done.
<tag-example-1>This black text is the only part of the document that is affected.</tag-example-1>
Example 1 shows a sentence that’s encapsulated by two tags, a begin- and end tag. Everything in between is affected. Very common examples are making text bold, ITALIC, or creating a link. The end tag is identical to the begin tag, but is preceded in angle brackets by a forward slash ( / ).
Elements
HTML documents are defined by HTML elements.
An HTML element is everything from the start tag to the end tag.
An HTML element starts with a start tag / opening tag and ends with an end tag / closing tag.
The element content is everything between the start and the end tag.
Some HTML elements have empty content (no content) and are closed in the start tag. Most HTML elements can have attributes.
Empty elements (HTML elements with no content).
<br> is an empty element, or loner tag, without a closing tag (the <br> tag defines a line break). Although not required, it’s occasionally also written as <br/> to emphasize this. Loner tags don’t affect ‘part’ of the document, but signify things that happen ‘in between’. Common examples are line breaks and paragraph breaks.
Note: for loner tags, <tag>, <tag />, and <tag></tag> all mean the same thing.
Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements. The HTML document example below contains three HTML elements.
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Many HTML elements will produce unexpected results and/or errors if you forget the end tag.
Attributes
Attributes provide additional information about HTML elements.
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name=”value”
Common examples of additional attributes are text font and color, or image width, height and source. In those cases, the tag name is followed by a space, and a number of attribute with a value, again separated by spaces. The value is the variable part of this formula. The end tag remains the same, regardless of the attributes.
<tag attribute=”value” attribute2=”value2″>This, and only this part of the document is affected.</tag>
Attribute names and attribute values are case-insensitive, but the World Wide Web Consortium (W3C) recommends lowercase attributes so it is best to use lower case.
HTML, HEAD & BODY
The HTML, HEAD and BODY tags encapsulate the important parts of a document.
- <HTML></HTML> simply indicates the use of HTML code. They’ll show in every webpage, usually at start and end, and embrace practically all the other code, including the next two.
- <HEAD></HEAD> mark the ‘administrative building’. These will encapsulate the title, and enable certain scripts. Usually at the very top of the document.
- <BODY></BODY> is located below the HEAD tags, and makes up most of the document. This part tells what’s actually showing on your webpage. Here are the text, images, links, and pretty much anything you can see in your browser.
The ‘Head’ area
The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.
The Title Element
The thing you must include in the HEAD section of all webpages in order to write valid HTML documents is the TITLE element. The <title> tag defines the title of the document. The title of a webpage appears in your browser´s title bar when you view the page. The title element is required in all HTML/XHTML documents. It will also provide a title for the page when it is added to favorites and displays a title for the page in search-engine results.
The Meta Element
The META element is used for a couple of different functions always inside the HEAD section. It´s the first empty element, which means that the META element can consist only of an opening tag. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The most important use for this element is to give the search engines some basic information about your HTML document such as the most important keywords that appear inside the document and a short description of the document´s content.
META tags use different attributes to specify the function for which each meta element is used. For example: to tell the search engines about important keywords inside your document, you would use the attribute name with the value keywords to define the function of this meta tag and also a second attribute content whose value is a list of comma-separated keywords (or keyphrases) – like this:
<meta name=”keywords” content=”keyword1, keyword2, …”>
For a short description about the document, you would use description as value for the name attribute and a short text for the value of the content attribute:
<meta name=”description” content=”Free Web tutorials on HTML, CSS, XML” />
The HTML base Element
The <base> tag specifies a default address or a default target for all links on a page:
<head>
<base href=”http://www.w3schools.com/images/” />
<base target=”_blank” />
</head>
The HTML style Element
The <style> tag is used to define style information for an HTML document.
Inside the style element you specify how HTML elements should render in a browser:
<head>
<style type=”text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>
The HTML link Element
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is mostly used to link to style sheets:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
The HTML script Element
The <script> tag is used to define a client-side script, such as a JavaScript.
HTML head Elements
| Tag | Description |
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base /> | Defines a default address or a default target for all links on a page |
| <link /> | Defines the relationship between a document and an external resource |
| <meta /> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
The Body area
The body element defines the document’s body. It contains what you can actually see on your web page.
The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
HTML Headings
H is the element name that stands for “heading”.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Headings Are Important
HTML headings are to be used for headings only, not to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
HTML Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
<p>This is<br />a para<br />graph with line breaks</p>
The <br /> element is an empty HTML element. It has no end tag but because in future versions of HTML this is not allowed, it is best to use an end tag.
HTML Output
You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags
| HTML Text Formatting TagsTag Description<b> Defines bold text
<big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text |
Nowadays, markup is often kept in a separate CSS file. The exact style figures are explained externally, and one only needs to ‘mark’ part of the document to apply them. This is done by using div tags. For example, <div class=”headermakeuseof”>sometext</div> will look for a headermakeuseof class in the CSS file.
Embedded Images with <IMG>
Here are some of the attributes used in conjunction with the IMG tab.
Very important. The source attribute specifies the location of a picture. A picture is never really rendered in a web page, but gets pulled in from an external source. Once you’ve got that address, you’ve got the picture.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for “source”. The value of the src attribute is the URL of the image you want to display.
| <img src=”url” alt=”some_text“/> |
The URL points to the location where the image is stored. An image named “boat.gif”, located in the “images” directory on “www.w3schools.com” has the URL: http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
HTML Images – The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src=”boat.gif” alt=”Big Boat” />
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images – Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src=”pulpit.jpg” alt=”Pulpit rock” width=”304″ height=”228″ />
It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
HTML Lists
The most common HTML lists are ordered and unordered lists:
An ordered list:
|
An unordered list:
|
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
| <ul><li>Coffee</li><li>Milk</li>
</ul> |
How the HTML code above looks in a browser:
- Coffee
- Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
- Coffee
- Milk
HTML Definition Lists
A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
Coffee
– black hot drink
Milk
– white cold drink
| HTML List TagsTagDescription
<ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines an item in a definition list <dd> Defines a description of an item in a definition list |
HTML Links
Inside a list item you can put text, line breaks, images, links, other lists, etc.
Links are found in nearly all Web pages. Links allow users to click their way from page to page.
HTML Hyperlinks (Links)
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
- To create a link to another document, by using the href attribute
- To create a bookmark inside a document, by using the name attribute
HTML Link Syntax
The HTML code for a link looks like this:
<a href=”url“>Link text</a>
The href attribute specifies the destination of a link.
Example
<a href=”http://www.w3schools.com/”>Visit W3Schools</a>
which will display like this: Visit W3Schools
Clicking on this hyperlink will send the user to W3Schools’ homepage.
The “Link text” doesn’t have to be text. You can link from an image or any other HTML element.
HTML Links – The target Attribute
The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window:
Example
<a href=”http://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>
Always add a trailing slash to subfolder references. If you link like this: href=”http://www.w3schools.com/html”, you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this: href=”http://www.w3schools.com/html/”.
Named anchors are often used to create “table of contents” at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.
If a browser does not find the named anchor specified, it goes to the top of the document. No error occurs.
This was the first simple piece of HTML code that I wrote, which included a basic page structure, paragraph text, an unordered list, an H1 heading, an image and a page link.
The difference between HTML and CSS
HTML is responsible for the construction, and the total output, of a page.
Unlike HTML, CSS does not “create” anything instead, it decorates, aligns, and positions elements in HTML. CSS takes the normal HTML output and adds a few rules as to how it’s actually displayed.
CSS can edit things such as element width and height, background color, border, alignment, and actual visibility. HTML is capable of doing some of these things, but not as.
CSS is incorporated into a webpage using Internal markup (In the <head>; in <style> tags) or external markup (From a “.css” file).
Anatomy of a CSS rule
Selector: The standard HTML Tags eg: h1
Property: option for the tag eg. colour, font etc
Value: The actual colour or font
h1 {color:blue; font-size:12px;}
Here h1 is the selector, the color and font size are the Properties and blue and 12pxs are the Values.
Plainyjane's Blog 
