Embed Size (px)
DESCRIPTION
chrome developer and tags basics
Citation preview
Using Developer in Google Chrometo create and edit HTML
Obtain your HTML files for editing by:
1. navigating to the student share directory
2. then to the IST folder
3. then to the “student html docs” folder
4. copy the “student html docs” folder and paste to your home folder.
Getting started
Open chrome and then open the “student html docs” folder.
Select the three line icon
The drop down menu expands to provide a selection of options. Choose “Tools”
In Google Chrome to access the Developer Tool:
The further option appearsNow select “Developer tools”
All the coding iscompleted hereand will appears in the window above.
All that you wish toAppear on the pageIs typed between the tags <body> </body>
Coding area in Google Chrome
Two steps are here:1. Right click in between the body tags2. Select “Edit as HTML”
Right click on the tags and start typing
The text that you type will appear here in the window above the console
Examples of coding
By adding the tag <font color=red> I have changed the Colour of the text to red. I must close the tag using </font color>or the tags attributes will continue, in this case everything passed theword html will be red.
See the effect of the tag
This tag is used to place an imagewithin the html file and looks like<img src=“location\filename.jpg”>
Adding an image to your page
My image on the page
Tags that you can use in your HTML file
A tag that you wish to appear on your page must be placedbetween the two body tags, the opening <body> and closing tag </body>.
Essential tags for html
Formatting tags
Tags that create links
Tags that colour
Tags to use with images
Tags for additional options
Useful sites for HtmL
http://www.w3schools.com/html/default.asp
http://www.computerhope.com/htmcolor.htm#03
http://www.htmlcodetutorial.com/
http://www.dynamicdrive.com/
Advanced for later
