Using Developer in Google Chrometo create and edit HTML
Obtain your HTML files for editing by:1. navigating to the student share directory2. then to the IST folder3. then to the “student html docs” folder4. copy the “student html docs” folder and paste to your home folder.
Getting started Open chrome and then open the “student html docs” folder.
In Google Chrome to access the Developer Tool: Select the three line icon The drop down menu expands to provide a selection of options. Choose “Tools”
The further option appearsNow select “Developer tools”
Coding area in Google Chrome All the coding is completed here and will appears in the window above. All that you wish to Appear on the page Is typed between the tags <body> </body>
Two steps are here:1. Right click in between the body tags2. Select “Edit as HTML”
Examples of coding The text that you type will appear here in the window above the console Right click on the tags and start typing
See the effect of the tagBy adding the tag <font color=red> I have changed theColour 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.
Adding an image to your page My image on the pageThis tag is used to place an imagewithin the html file and looks like<img src=“locationfilename.jpg”>
Tags that you can use in your HTML fileA tag that you wish to appear on your page must be placedbetween the two body tags, the opening <body> andclosing tag </body>.