Intercity Collage of Science and Technology 233 Araullo St, Corner, E. Jacinto Ext.

Davao City

Course Requirements In Course Code IT314

Structure of Programming Languages

Submitted to: Cristelyn E. Bagan Submitted by: Alfredo Berjame Jr. & Naomi Grace V. Caeda April 2013

The History of HTML

A Brief Recount of the development of the Hypertext Markup Language

Table of Contents

Chapter 1 Introduction Getting started - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1 History- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2 What is HTML? - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -3 How to create and View an HTML document? - - - - - - - - - - - - - - - - - - - - - - - 4 Basic HTML Document Format - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -5 The HTML Basic tags - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 6-7 HTML program Examples - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -8-13

Chapter 2 References - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -18 Resume

What the following term mean:

Web server: a system on the internet contain one or more web site Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website

Think about the followings before working your Web pages. Think about the sort of information (content) you want to put on the Web. Set the goals for the Web site. Organize your content into main topics

History

Tim Berners-Lee In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in the last part of 1990. In that year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes from 1990 he listed "some of the many areas in which hypertext is used" and put an encyclopedia first. The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly influenced by SGMLguid, an in-house SGML-based documentation format at CERN. Eleven of these elements still exist in HTML 4. Berners-Lee considered HTML to be an application of SGML. It was formally defined as such by the Internet Engineering Task Force(IETF) with the mid-1993 publication of the first proposal for an HTML specification: "Hypertext Markup Language (HTML)" Internet-Draft by Berners-Lee and Dan Connolly, which included an SGML Document Type Definition to define the grammar. The draft expired after six months, but was notable for its acknowledgment of the NCSA Mosaic browser's custom tag for embedding in-line images, reflecting the IETF's philosophy of basing standards on successful prototypes. Similarly, Dave Raggett's competing Internet-Draft, "HTML+ (Hypertext Markup Format)", from late 1993, suggested standardizing alreadyimplemented features like tables and fill-out forms.
2

What is HTML?

Telling the browser what to do, and what props to use. A series of tags that are integrated into a text document.

HTML is a markup language which is uses to design web pages which is short for Hyper Text Markup Language is the official language of the World Wide Web and was first conceived in 1990 by Tim Berners-Lee. HTML is a product of SGML (Standard Generalized Markup Language) which is a complex, technical specification describing markup languages, especially those used in electronic document exchange, document management, and document publishing. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. Hyper is the opposite of linear. Old-fashioned computer programs were necessarily linear - that is, they had a specific order. But with a "hyper" language such as HTML, the user can go anywhere on the web page at any time. Text is just what you're looking at now - English characters used to make up ordinary words. Mark-up is what is done to the text to change its appearance. For instance, "marking up" your text with <b> before it and </b> after it will put that text in bold. Language is just that. HTML is the language that computers read in order to understand web 3

How to create and View an HTML document?

1. Use a text editor such as Editpad to write the document. 2. Save the file as filename.html on a PC. This is called the Document Source.

3. Open Netscape (or any browser) Off-Line 4. Switch to Netscape 5. Click on File, Open File and select the filename.html document that you just created. 6. Your HTML page should now appear just like any other Web page in Netscape. 7. You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to Netscape click on RELOAD and view the new HTML Document

Basic HTML Document Format

Basic HTML Tags

Tags in head

 <HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar. Tags in Body Let's talk Text Heading: <H1> </H1> Center:<Center> </Center> Line Break <P> ,<Br> Phrase Markups: <I></I> ,<B></B> Create a List Unordered list : <UL><li> list: <OL><li>

Nested Add Images Use <IMG SRC=imagefilename> tags How to specify Relative pathnames Attributes of IMG tag -width,height -Alt -Align-<Img src=my.gif width=50 height=50 align=right alt=My image> 6 Add some Link Use <A href=filename|URL></a>tags

 How to specify Relative pathnames Kinds of URLs -http://www.women.or.kr - ftp://ftp.foo.com/home/foo - gopher://gopher.myhost.com/ - news://news.nuri.net - mailto:skrhee@women.or.kr

How to make colors changes? Hexadecimal number : Color names : <Font color=white> Changing the Background color <BODY BGCOLOR=#19378a> Changing Text color <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 Spot color <FONT COLOR=#66ffcc>WENT'99</FONT> Image Background <BODY BACKGROUND=bgimg.gif >
7

VLINK=#66ffff>

HTML PRORAM EXAMPLES

Example 1 HTML Page Format <HTML> <HEAD> <TITLE> Qis web! </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <! Rest of page goes here. This is a comment. > </BODY> </HTML>

Output

Example 2 Program code <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1>Level-1 (H1)</H1> <H2 ALIGN="center">Level-2 (H2)</H2> <H3><U>Level-3 (H3)</U></H3> <H4 ALIGN="right">Level-4 (H4)</H4> <H5>Level-5 (H5)</H5> <H6>Level-6 (H6)</H6> </BODY> </HTML> Output

Example 3 Program code <BODY> <img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin jump!"> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br> </BODY> </HTML> Output

11

Example 4 Physical Character Styles, Example ... <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR Output

12

Example 5 Image Alignment, Example <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD><TITLE>Image Alignment</TITLE></HEAD> <BODY> <H1 ALIGN="CENTER">Image Alignment</H1> <TABLE BORDER=1> <TR><TH>Alignment <TH>Result <TR><TH><CODE>LEFT</CODE> <TD><IMG SRC="rude-pc.gif" ALIGN="LEFT" ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the left side, with text flowing around it on the right. <TR><TH><CODE>RIGHT</CODE> <TD><IMG SRC="rude-pc.gif" ALIGN="RIGHT" ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the right side, with text flowing around it on the left. </TABLE> </BODY> </HTML Output

13

References

http://en.wikipedia.org/wiki/HTML http://www.w3schools.com/html/ http://www.htmlgoodies.com/tutorials/html_401/html4-ref/article.php/3460261/A-Brief-Historyof-HTML.htm http://inventors.about.com/od/computersoftware/a/html.htm http://www.quackit.com/html/codes/ http://ascii.cl/htmlcodes.htm

18

Alfredo Berjame Jr. Cell #: 09424961649 Purok 6 Barangay 37 D Trading Boulevard Davao City

Sex: Date of Birth: Height: Religion: Weight: Civil status:

Male Jan 6 1995 57 Roman Catholic 120lbs Single

Educational Background Primary: 2004 Secondary: 2007 Tertiary: Magallanes Elementary School Our Lady of Fatima Academy Intercity College of Science and Technology Sy: Sy:

Naomi Grace V. Caeda

Cell #: 09424961649 Matina Balusong Mc. Arthur Highway, Davao City

Sex: Date of Birth: Height: Religion: Weight: Civil status:

Female October 28, 1992 53 Christian 54 Single

Educational Background Primary: Secondary: Tertiary: San LorenzoElementary School Emar Learning Center Intercity College Of Science and Technology Sy: 2005 Sy: 2009