1 / 29

جلسه دوم

با تكيه بر مفاهيم كاربردي. جلسه دوم. آشنايي با كدها و عناصر صفحات HTML. يادآوري و پرسش و پاسخ. What is the Internet? The Internet is a connection of all worldwide networks using the same network communication protocol. What is the Web?

jariah
Download Presentation

جلسه دوم

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. با تكيه بر مفاهيم كاربردي جلسه دوم آشنايي با كدها و عناصر صفحات HTML

  2. يادآوري و پرسش و پاسخ • What is the Internet? • The Internet is a connection of all worldwide networks using the same network communication protocol. • What is the Web? • The Web is a term that is used to refer to the many files that are written in HTML. HTML allows users to view text, graphic, video, sound, etc. The World Wide Web (www) enables you to access documents linked across the Internet. • What is HTML? • HTML (Hypertext Markup Language) is a set of special codes embedded in text which add formatting and linking information. HTML consists of “tags” inserted by the user which enable the production of the WEB page on the Internet. For example, in the statement <B>Sample</b>, the <B> indicates the start of bold and the </b> indicates the ending of the bold. • What is a browser? • A browser is software that allows you to view or browse an HTML document, i.e., Netscape. • Do I need a special software package to write my HTML file? • No, you can use any text editor or word processor to write your HTML code. One of the most popular ones is Microsoft Notepad, which can be found under START, PROGRAMS, ACCESSORIES using Windows 95.

  3. صفحه وب يا (Web Page) سندي بر روي وب كه توسط يك مرورگر وب قابل نمايش است را يك صفحه وب مي‌گويند. صفحه وب در اصل يك فايل متني است كه توضيحاتي براي مرورگر در بر دارد. اين توضيحات كه TAGيا برچسب ناميده مي‌شوند، چگونگي نمايش متون و تصاوير را در يك صفحه وب نمايش مي‌دهند. نمونه يك صفحه وب Web Browser Source Code (HTML) Design View (Preview) HTML : Hypertext Markup Language Hypertext : text containing links to other text’s

  4. ساخت اولين صفحه وب Save As HTML: Browse by a browser:

  5. HTML Basic HTML ElementsHTML Basic TagsHTML FormattingHTML EntitiesHTML LinksHTML FramesHTML TablesHTML ListsHTML FormsHTML ImagesHTML Background

  6. HTML Advanced HTML LayoutHTML FontsHTML 4.0 WhyHTML StylesHTML HeadHTML MetaHTML URLsHTML ScriptsHTML Web server

  7. Opening Tag Closing Tag Closing Tag Opening Tag Closing Tag تشريح يك سند HTML <html> <head> <title> My name is: A. N. </title> </head> <body> This is some text that will appear on the web page. </body> </html>

  8. Tag Attributes • <body bgcolor=“VALUE"> • Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. <!-- XXXXXX--> . The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

  9. Some Common Tags… HTML Tag Close Tag Meaning <HTML> </html> Defines a Web-formatted document <HEAD> </head> Defines heading section of document <TITLE> </title> Title of page <BODY> </body> Defines the body of the HTML page <BR> none Line break/one carriage return <HR> none Horizontal line <CENTER> </center> Places text within the center of a line <P> none Paragraph breaks; two carriage returns

  10. Some More Tags… HTML Tag Close Tag Meaning <Hn> </hn> Document header level (n=1-6) <B> </b> Bold <I> </i> Italics <U> </u> Underline <TT> </tt> Teletype text Lists <OL> </ol> Ordered (numbered) list <UL> </ul> Unordered (bulleted)list <LI> none List item <DL> </dl> Creates a glossary list <DT> none Defined term in a glossary list <DD> none Definition in a glossary list

  11. آشنايي با برچسب‌ها و ويژگي‌هاي بيشتر • Link Tags • <a href=“http://www.google.com/”> This is a link to somewhere… </a> • Image Tags • <img src=“http://www.iums.ac.ir/hello.jpg”> </img> • Markup tags • <b> This text will be bold </b> • And this is <u> underlined </u>

  12. Text Format, Cont.Below is an example in Notepad and Netscape of using headings, fonts, and lists.

  13. Page Format Below is a partial list of different tags for formatting a page. You can change the color of the background, text and links. You can also change fonts. rrggbb indicates the amount of red, green and blue in a certain color ranging from the number 0 to the letter F. For example, 000000=black, while FF0000=red. Tag Meaning <BASEFONT SIZE=n> Changes the default font size throughout the page to the specified size (range 1-7). <BODY> bgcolor=#rrggbb Specifies background color for the page. background=file Uses the specified file as the background image on page text=#rrggbb Sets text in specific color. <FONT></font> face=“font name” Defines the font of the text. size=n Specifies size of font (range 1-7). color=color Changes the font color. <HR> Horizontal line noshade Makes line solid black size=n Sets the height of horizontal line. width=n% Sets the width of line; n=0-100 color=rrggbb Specifies the color of the line.

  14. Page Format Below are examples using different colors and fonts. In Notepad In Netscape

  15. Adding Links As a hypertext system, HTML allows you to link portions of a document to other locations that can be in either the same document or other documents. When a Web browser sees a link, it signals the available links to the user by underlining or coloring the link region. The link markup tag in HTML is <A> (denoting “anchor”). This is followed by the URL of the destination document. You can also include a link to your e-mail. This is done by using the URL tag, mailto and then your e-mail address. To add a link follow these steps: • Begin your anchor with “<A”. Don’t forget the space after the A. • Enter the URL of the destination document by typing HREF=“URL” (HREF stands for hyper reference. • Enter “>”. • Enter the text that serves as the name or pointer to the destination document. • Enter the closing container tag, </a>. HTML Tag Close tag Meaning <A> </a> Defines an anchor for the link. HREF=“url address” Gives the destination of the link using its URL mailto:”e-mail address”Identifies address where e-mail will be sent <BODY LINK=#rrggbb> Sets the color of the link. <BODY ALINK=#rrggbb> Sets the color of the active link. <BODY VLINK=#rrggbb> Sets the color of the visited link.

  16. Adding links, cont. Below is what your Notepad document would look like if you were to add Suffolk’s Web page and your e-mail address to your Web page. This is what it will look like in Netscape.

  17. Tables Within HTML language, you are able to construct tables. Below are the tags used to create tables. HTML Tag Close Tag Meaning <TABLE> </table> Defines the start and end of a table border Displays the lines within a table. align=left, center or rightDefines the position of the table on the page. width=nWidth of entire table on the page; n=0-100%. <TR> </tr> Defines the start and end of a row. <TD> </td> Defines the start and end of a data table entry. Align=left, center, rightAligns entries in a row. Below are examples in Notepad and Netscape

  18. Adding Images Including images in your Web document is very easy with the <IMG> (image) format tag. The two formats supported by HTML are GIF, CompuServe’s Graphics Interchange Format and JPEG, the industry-standard Joint Photographic Expert Group format. The HTML tag that you use to place a graphic image is the Image tag <IMG>. It is used along with the source attribute (SRC), which is a reference to the location of the image file. To place an image on a Web page follow these steps: • Type <IMG SRC=“filename.gif or .jpeg” • Type a closing angle bracket (>) You can also modify the image on your web page. Below are tags and descriptions for adding images and modifying images to you Web page. HTML Tag Meaning <IMG> Includes an inline image src=graphic filename Filename of the image align= left, right, top, middle or bottom Determines the alignment of a graphic image, and how the text around it will align. alt=“text” Text description of the image border=n Size of picture border height=n Fixed height of image width=n Fixed width of image

  19. Images, Cont. Here are examples of using images in Notepad and Netscape.

  20. HTML Quick Reference Tag Definition Structure Tags <HTML></html> Marks beginning and end of html document <HEAD></head> Marks beginning and end of the header <TITLE></title> Identifies the title of document <BODY></body> Marks the beginning and end of the body background=“…” Specifies image for background bgcolor=color Specifies color for background text=color Specifies color for text link=color Specifies color for unvisited links alink=color The color briefly seen when linked is clicked vlink=color The color of visited links Paragraphs and Text Dividers <BR> Inserts a line break <P> Paragraph break align=center, left or right Aligns paragraph <HR> Adds a horizontal line align=left, right, center Aligns the line size=n Specifies thickness of line noshade Makes the line black width=n% Specifies width of line; n=0-100 color=color Specifies color of line <ADDRESS></address> Used to define contact info. on the author <BLOCKQUOTE></blockquote> Creates a quotation block Character Formatting <B></b> Bold <BIG></big> Large print font <BLINK></blink> Makes blinking text <CENTER></center> Centers text <TT></tt> Teletype text <U></u> Text is underlined

  21. Tags Definition <I></i> Text is in italics <FONT></font> size=n Changes the font size; range is 1-7. color=color Changes the font color face=font name Changes the font style <MARQUEE></marquee>(Internet Explorer) Inserts a marquee of moving text align=left, right, center, bottom, top, middle Alignment of text surrounding marquee behavior=scroll, slide alternate How the text moves bgcolor=color Background color of the marquee direction=left, right Direction of text scrolls height=n Height of the marquee width=n Width of the marquee loop=n Scrolls the marquee n times <S></s> Puts text in a strikethrough font <SMALL></small> Text is a small-print font <SUB></sub> Text is in subscript <SUP></sup> Text is in superscript Headings <Hn></hn> Heading for a document; n=1-6 align=left, center, right, justify Sets alignment of heading Tables <TABLE></table> Defines a table border=n Shows line of table in specifies thickness align=left, right, center, justify Aligns table width=n Fixed width of entire table; n=any number bgcolor=color Background color of table bordercolor=color Color of the table boarder cellspacing=n Sets spacing between cells <TR></tr> Starts a new row in a table <TD></td> Data table entry align=left, right, center Aligns entries in a row

  22. TagsDefinition Lists <OL></ol> Creates an numbered list type=A, a, I, i, or 1 Specifies type of numbering start=n Starting number of list <UL></ul> Creates a bulleted list type=circle, disc or square Specifies type of bullet <LI> Identifies a list item <DL></dl> Creates glossary list <DT> Defined term in a glossary list <DD> Definition in a glossary list Hyperlinks <A></a> Defines an anchor for a link HREF=“url” URL of the document where the link points mailto:”…” Used to create link to an e-mail address name=name Defines an anchor location in a document Images <IMG> Inserts a graphic image into an HTML document src=graphic filename Filename of the image alt=“text” Text description of image align=left, right, top, middle or bottom Aligns the image and how the text around it will align border=n Size of picture border height=n Height of image width=n Width of image hspace=n Space between an image and text to its left or right vspace=n Space between an image and the text above or below it.

  23. HTML Color Table Color rrggbb Color rrggbb White FFFFFF Light Green 32CD32 Red FF0000 Maroon 8E236B Green 00FF00 Medium Blue 3232CD Blue 0000FF Navy Blue 23238E Yellow FFFF00 Neon Blue 4D4DFF Black 000000 Neon Pink FF6EC7 Blue Violet 9F5F9F Orchid DB70DB Orange FF7F00 Pale Green 8FBC8F Brown A62AA2 Pink BC8F8F Dark Green 2F4F2F Plum EAADEA Dark Brown 5C4033 Scarlet 8C1717 Dark Purple 871F78 Sea Green 238E68 Dark Slate Blue 6B238E Sky Blue 3299CC Dusty Rose 856363 Slate Blue 007FFF Forest Green 238E23 Summer Sky 38BODE Gold CD7F32 Tan DB9370 Gray C0C0C0 Turquoise ADEAEA Hunter Green 215E21 Violet 4F2F4F Green Yellow 93DB70 Yellow Green 99CC32 Light Blue COD9D9

  24. My First HTML Page - Microsoft Internet Explorer “Hello,” she said. £1.99 only résumé >,< and & are special in HTML Special Characters (" & < > £ etc) <p> &quot; Hello, &quot; she said. </p> <p> &pound; 1.99 only </p> <p> r &eacute; sum &eacute; </p> <p> &gt; , &lt; and &amp; are special in HTML </p>

More Related