Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Document
Transcript
Internet Service Provider (ISP) – Intranet –. Web Host – A Web host may also be called a ___________________________ Internet Service Provider (ISP) – A company that provides you with access to the Internet. Intranet – This is like your own private Internet in that it uses the same HTTP as the World Wide Web, but it is accessible only by people within your own network. Web Host – A company that stores (hosts) information that can be accessed from the Internet using the HTTP. A Web host may also be called a Web Presence Provider (WPP). Web Technologies Introduction to HTML Scripting © UNT in partnership with TEA 3 Part 1 Basic Tags & Structure © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 4 Benefits of Learning HTML Webmasters with coding ability are in high demand. HTML is the core language of all websites. Coding ability provides for better control over website development. Designers can easily adapt to updates in web design technology. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 5 Before Getting Started You will need a text editor. Notepad, Notepad 2, or Notepad++ is preferred. You should have a designated location or web directory to save the examples. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 6 The Text Editor Web pages are nothing more than text files with formatting instructions. Quality web pages can be created in simple text editors such as Notepad. Notepad 2 © UNT in partnership with TEA Windows Notepad IT: Web Technologies - HTML Scripting 7 What is HTML? •Stands for Hyper Text Markup Language •Any computer can read the HTML markup •HTML is a formatting language, NOT a programming language. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 8 Web Page Structure (refer to web page structure handout) The <html> and </html> tags start and end the document. They tell the browser where the starting point and ending point of your web page is. The heading and the body are the two main sections of a web page. The heading of your web page contains tags that work behind the scenes. The body section contains the actual content on your web page. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 9 Standard web page Structure and sections © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 10 HTML Grammar •All tags should be written in lower case <body> •All values, anything after an equal sign, should be enclosed in quotes. <body bgcolor=“#ff0000”> •All tags must be closed. </body> © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 11 DOCTYPE Tag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> •Specifies the version of HTML or XHTML the document is written in. •Should be placed above the opening HTML tag before a document is published online. •There is no closing tag. •Is written in upper case as shown (unlike other tags) © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 12 Open your text editor and type the following code: <html> <head> <title>World Travel</title> </head> <body> </body> </html> Save your file as index.htm to your Student Files folder. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 13 Encapsulation •HTML tags encapsulate (surround) the text that they are formatting. <b><i><center>Text to Format</center></i></b> •If more than one tag is formatting the text, then the closing tags should be written in reverse order from how they were opened. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 14 Tag Specifications •The body tag specifies where the page body begins and ends. •By adding attributes to the body tag, you can make general specifications regarding your documents appearance, such as background color, text color, and your link colors. •Attributes specify additional properties of a particular tag. Attributes are added to tags immediately after the tag name. They only need to be added to the opening HTML tag. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 15 Basic Tags •Paragraph Tags are indicated with the opening <p> and the closing </p>. •Text in the form of blocks or paragraphs should be enclosed within the paragraph tags. •Various formatting options can be added to the paragraph tag such as: align=“left” | “right” | “center” | “justify” <p align=“justify”>Add paragraph here</p> © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 16 Basic Tags •Heading Tags are used for various one line headings on your document. •The <h1> tag displays the largest text and the <h6> displays the smallest text. •Text formatted with a heading tag is resized, bolded, and a line break is placed at the end of the line. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 17 Open index.htm in your text editor and add the following code shown in orange. <body> <h1>World Travel!</h1> <p>World Travel is based out of the Dallas/Fort Worth Metroplex. We specialize in making travel arrangements for business travel, groups, and family vacations. We have over 20 years of experience in all areas of travel arrangements and can offer you the best in personal and friendly service.</p> </body> NOTE: The blue code should already be typed. You should only be added the code shown in orange. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 18 Preview Your Page Open your web browser (Internet Explorer, Firefox, etc) •Click on File •Select Open •Navigate to where you saved index.htm and select the file to open. World Travel World Travel is based out of the Dallas/Fort Worth Metroplex. We specialize in making travel arrangements for business travel, groups, and family vacations. We have over 20 years of experience in all areas of travel arrangements and can offer you the best in personal and friendly service. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 19 Basic Tags •Line Breaks are inserted into your web document using the <br /> tag. The web browser does not recognize white space, or when you press the ENTER key to move to a new line, therefore you must specify when you want to insert a line break in a web page. Line 1 <br /> Line 1 Line 2 <br /> Line 2 Line 3 <br /> Line 3 Line 4 <br /> Line 4 © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 20 Basic Tags •Horizontal Rule tags draw a horizontal line, or divider, on your web page. •Inserted by using the <hr /> tag. •Horizontal Rules do not have a corresponding ending tag because it just inserts a line. •Horizontal rules will automatically apply a break at the end of the line. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 21 Basic HTML Tags <body> ~ </body> Specifies the body content <b> ~ </b> Bolds Text <u> ~ </u> Underlines Text <i> ~ </i> Italicizes Text <center> ~ </center> Centers Text <p> ~ </p> Encloses paragraphs <br /> Inserts a line break <br clear=“all” /> Section Break Open index.htm in your text editor and add the following code in orange after the closing </p> tag. friendly service.</p> <hr /> <b>Our Packages Include:</b><br /> Tour Arrangements<br /> Sporting Event Tickets <br /> Dinner Reservations <br /> </body> © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 23 Return to your browser and click the Refresh button or press F5. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 24 Tag Attributes •An attribute is a feature that you can add to a tag that will allow you to modify the default features of the tag. •For example: By adding the width attribute to the horizontal rule tag below, we are able to modify the width of the horizontal rule to only 50% of the page. <hr width=“50%” /> To modify the thickness of the line, we will can use the size attribute. <hr width=“50%” align=“right” size=“4” /> © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 25 Align Attribute •Most attributes are not tag dependent and can be added to other tags. •The align attribute can be applied to any of the Heading tags, the paragraph tags, horizontal rule tag, and many other tags that you will see later. •When possible, its best to use attributes instead of additional tags. <h2>This text will be left aligned</h2> <center><h2>This text will appear centered</h2></center> <h2 align=“center”>This text will appear centered too</h2> © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 26 Specifying Colors •Colors can be specified by their name (blue) or by their RGB Color Code. •RGB Color Code is a combination of 6 codes, the first two representing the intensity of red, the second two specifying the intensity of green, and the third two codes representing the intensity of blue. •Below are some of the various shades of blue using RGB color code: #000066 #003399 #336699 EX: <body bgcolor=“#6699ff”> #3366FF Specifying Colors •By adding the bgcolor attribute to the body tag, you can change the background color of your web page. •To use the bgcolor attribute, apply it as shown below to the opening body tag: <body bgcolor=“#3366ff”> Your Web Page Your Web Page </body> © UNT in partnership with TEA 28 IT: Web Technologies - HTML Scripting Specifying Colors •By adding the text attribute to the body tag, you can change the default text color. •To use the text attribute, apply it as shown below to the opening body tag: <body bgcolor=“#3366ff” text=“ffffff”> Your Web Page </body> Your Web Page © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 29 Open index.htm in your text editor and add the code in orange: <body bgcolor=“#6699ff”> <h1 align=“center”><u>World Travel</u></h1> <p>World Travel is based out of the Dallas/Fort Worth Metroplex. We specialize in making travel arrangements for business travel, groups, and family vacations. We have over 20 years of experience in all areas of travel arrangements and can offer you the best in personal and friendly service.</p> <hr width=“75%” size=“2” /> © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 30 Preview index.htm once again in your browser. Notice the following: •The background color has changed •The heading “World Travel” is now underlined •The Horizontal Rule is only 75% of the width and is two pixels in size. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 31 Special Characters Web browsers will only recognize one space following a word or character, all others are ignored. For example, if you were to type a word and press the space bar five times, only the first space would be recognized by the browser. The browser assumes that the other spaces are part of the code layout and not part of the actual document. To add additional spaces to a web page, HTML includes a set of code called SPECIAL CHARACTERS. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 32 Applying Special Characters HTML tags are created between the < and > brackets Special characters are created between the & and ; characters. Special characters are the characters and symbols that are not on your keyboard, or that the browser would normally interpret as something else, or ignore. © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 33 Special Characters The table below lists some of the common special characters: < > © & " Space < > © & “ Complete Lab 1: © UNT in partnership with TEA IT: Web Technologies - HTML Scripting 35
