HTML and Java Script Basics Unit One Lesson
HTML and Java. Script Basics Unit One Lesson Two HTML Organizational Techniques Introducing some techniques formatting a web page and creating hypertext links
Lesson Objectives • Organize page information with single and double spacing • Organize page information with horizontal lines • Define attributes and values and describe their function • Change web page color defaults by altering attributes and values • Alter web page text colors • Create a hyperlink to another spot within a web page, to another web page anywhere on the WWW, and to a file on the computer being used
Creating Better Web Pages There are many amazing looking web pages found on the internet each day, most of these were written with programs that do the coding for you but take years to master. We can make very attractive web pages using only HTML if we use some basic techniques formatting text. The most basic of these are the paragraph tag and the line break tag shown below: <P> New paragraph </P> <BR> Line break to get one line of separation Notice anything odd about the second one?
Lines and Background Colors Two of the most used techniques to improve the appearance of a web page are the horizontal line or horizontal rule and changing the color of the background. The horizontal rule is another tag without an end tag, here is an example’ <HR> To change the background color we need to cover two new terms attribute and value
Lines and Background Colors Attribute – a special quality about a tag Value – definition of the attribute Here is the deal, to change the basic structure of tag you have to list and attribute and give it a value. Here is how we change the background color: <BODY BGCOLOR=“BLUE”> or <BODY BGCOLOR=“#0000 FF”> Time for some fun, what is the difference?
Creating Hyperlinks inside the Web Page The basic structure of all hyperlinks is the same: <A HREF=“location”> Link </A> To link to a file in the same web page the location is the place in the web page you put an anchor. Here is how it looks: <A HREF=“#FROGS”> Jump down to the frogs </A> Other stuff for lines and lines… <A NAME=“FROGS”> </A> Now I discuss the frogs Do you see the process? , discuss…
Creating Hyperlinks to Web Pages on the WWW The basic structure of all hyperlinks is the same: <A HREF=“location”> Link </A> To link to a webpage on the WWW is even easier, here is how it looks: <A HREF=“http: //www. pbworks. com”> Link to the main page at PBWORKS </A> What is the main difference here?
Creating Hyperlinks to Pages and Files You Created The basic structure of all hyperlinks is the same: <A HREF=“location”> Link </A> To link to a web page or file you created you have to remember 3 thing: Location, Location. You must keep the file you are linking to in the same directory (folder) or point the linf to the folder. Here are two examples: <A HREF=“one. html”> Link to a file in the same folder </A> <A HREF=“pagestwo. html”>To a file in a pages folder </A> * The PAGES folder must be in the same folder as the web page referencing it.
Coloring Text The BODY tag has attributes that relate to the text on the web page, values can be set for each of them to change the look of the text on a page. Here is how it looks: <BODY TEXT=“RED” LINK=“Yellow” VLINK=“Green> There are other attribute such as ALINK, try to search sites in the lesson extension to find others.
Resources • Barksdale, K. , & Turner, E. S. (2002). HTML Basics. HTML and Java. Script BASICS (Basics (Thompson Learning)) (2 ed. , pp. 1 -33). Cambridge: Course Technology. • PBworks: Online Collaboration. (n. d. ). PBworks: Online Collaboration. Retrieved June 1, 2010, from http: //pbworks. com
- Slides: 10