1 / 23

Webpage Design with HTML (part 1)

Webpage Design with HTML (part 1). Computer and Information Science P. Minnesma © pminnesma, 2003. Terminology. WWW (World Wide Web) A global hypertext media service of the Internet; the Web. Conceived in 1990.

Pat_Xavi
Télécharger la présentation

Webpage Design with HTML (part 1)

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. Webpage Design with HTML(part 1) Computer and Information Science P. Minnesma © pminnesma, 2003

  2. Terminology • WWW (World Wide Web)A global hypertext media service of the Internet; the Web. Conceived in 1990. • HypertextText that links to other text (now includes images, video, sound, animation). Conceived in 1965. • HTML (HyperText Markup Language)The authoring language used to develop webpages. © pminnesma, 2003

  3. Web BrowserSoftware designed for the Internet; needs to run on a client computer. It performs 5 functions: locates Internet resources, requests resources from servers*, downloads data, interprets code, and displays data.Names: Microsoft Internet Explorer, Netscape Navigator* servers include: web servers, Gopher servers, FTP servers • URL (Uniform Resource Locator)The address of any Internet-based information resource. http:// is assumed. • TCP/IP (Transmission Control Protocol/Internet Protocol)The language (protocol) of the Internet; it packs and unpacks data called “packets” and sends/receives them. (see video) © pminnesma, 2003

  4. The hypertext language uses “tags” to control the data. <> for start tags </> for stop tags HTML authority site: http://www.w3c.org/ © pminnesma, 2003

  5. Tools Needed • Notepad (or Wordprocessor or text editor) • Web Browser (Microsoft or Netscape) © pminnesma, 2003

  6. Four Basic Tags • the tag to tell the browser an HTML document starts and stops • contains general info and it (will not be displayed) • data displayed on the title bar • data displayed in the browser window <HTML> </html> <HEAD> </head> <TITLE> </title> <BODY> </body> © pminnesma, 2003

  7. Let’s get started... <HTML> <HEAD> <TITLE>This is my first webpage</title> </HEAD> <BODY> <P>Paragraphs and any data appears here....</p> </body> </html> SaveAs: Index.html Create a folder called: first HTML © pminnesma, 2003 pause

  8. Formatting Tags(container tags) • paragraph container tag • bold container tag • italic container tag • underline container tag <P> </p> <B> </b> <I> </i> <U> </u> single or non-container tags: <HR> horizontal rule (line) <BR> carriage return (enter) © pminnesma, 2003

  9. Practice Add some paragraph data to your Index.html file, and incorporate the formats just introduced. SaveAs: Index2.html Open: Internet Explorer (off-line) © pminnesma, 2003

  10. <HTML> <HEAD> <TITLE>This is my first webpage</title> </head> <BODY> <P>Welcome to my first webpage.</p> <HR> <P>My name is <B>Mr. Minnesma</b>, but you can call me sir. This is great, that I am learning how to write my first program in <U>HyperText Markup Language</u> (HTML).</p> <P>Soon I will be able to add <I>hyperlinks</i> and <I>graphics</i>!! Cool!</p> <HR> Last updated: August 15, 2002<BR> (c) pminnesma, 2002 </body> </html> © pminnesma, 2003

  11. Welcome to my first webpage. My name is Mr. Minnesma, but you can call me sir. This is great, that I am learning how to write my first program in HyperText Markup Language (HTML). Soon I will be able to add hyperlinks and graphics!! Cool! Last updated: August 15, 2002(c) pminnesma, 2002 © pminnesma, 2003 pause

  12. more Format Tags • Heading 1 (22 pt. bold) • Heading 2 (16 pt. bold) • Heading 3 (14 pt. bold) • Heading 4 (12 pt. bold) • Heading 5 (8 pt. bold) • Heading 6 (6 pt. bold) <H1> </h1> <H2> </ h2 > <H3> </ h3 > <H4> </ h4 > <H5> </h5> <H6> </ h6 > © pminnesma, 2003

  13. Practice Add some Headings to your Index2.html file, and incorporate the formats just introduced. SaveAs: Index3.html View it: Internet Explorer (off-line) © pminnesma, 2003

  14. Welcome to my first webpage. • My name is Mr. Minnesma, but you can call me sir. This isgreat, that I am learning how to write my first program in HyperText Markup Language (HTML). • Soon I will be able to add hyperlinks and graphics!! Cool! • Last updated: August 15, 2002 • (c) pminnesma, 2002 © pminnesma, 2003 pause

  15. try changing <H1> to <H1 align=“center”> alignment can be applied to any tag, even horizontal lines and images tag name attribute modifier © pminnesma, 2003

  16. Lists un-ordered lists: <UL> <LI> first point <LI> second point <LI> third point </UL> © pminnesma, 2003

  17. Practice Add a List to your Index3.html file, and incorporate the formats just introduced. SaveAs: Index4.html View it: Internet Explorer (off-line) © pminnesma, 2003

  18. Welcome to my first webpage. • My name is Mr. Minnesma, but you can call me sir. This isgreat, that I am learning how to write my first program in HyperText Markup Language (HTML). • Soon I will be able to add hyperlinks and graphics!! Cool! • Things I enjoy doing, include: • School work • School work • School work • Last updated: August 15, 2002 • (c) pminnesma, 2002 Things I enjoy doing, include: <UL> <LI>School work <LI>School work <LI>School work </ul> © pminnesma, 2003 pause

  19. Practice Try these changes to your List to your Index3.html file. View changes in the browser. Don’t save. change <UL> to: <UL type=“circle”> <UL type=A> <UL type=a> <UL type=I> <UL type=i> <UL type=1> <OL type=1 start “5”> these are called: Ordered Lists pause © pminnesma, 2003

  20. Variations on HR <HR> 100% length of screen, 2 pixels thick <HR size=“number”> dictates thickness in pixels <HR width=“number or percent> dictates width of screen <HR align=“left/center/right> line position on screen <HR noshade> produces a solid line <HR color=“name or #rr-gg-bb”> dictates line colour © pminnesma, 2003

  21. Practice Try the following variation on a line. <HR width=“66%” align=“center” size=“5” color=“red” noshade> SaveAs: Index5.html View it: Internet Explorer (off-line) © pminnesma, 2003

  22. <HTML> <HEAD> <TITLE>This is my first webpage</title> </head> <BODY> <P><H1 align="center">Welcome to my first webpage.</h1></p> <HR> <P>My name is <B>Mr. Minnesma</b>, but you can call me sir. This is great, that I am learning how to write my first program in <U>HyperText Markup Language</u> (HTML).</p> <P>Soon I will be able to add <I>hyperlinks</i> and <I>graphics</i>!!Cool!</p> Things I enjoy doing, include: <UL> <LI>School work <LI>School work <LI>School work </ul> <HR width=66% align=center size="5" color="red" noshade> Last updated: August 15, 2002 <H6>(c) pminnesma, 2002</h6> </body> </html> © pminnesma, 2003 pause

  23. Welcome to my first webpage. • My name is Mr. Minnesma, but you can call me sir. This is great, that I am learning how to write my first program in HyperText Markup Language (HTML). • Soon I will be able to add hyperlinks and graphics!! Cool! • Things I enjoy doing, include: • School work • School work • School work • Last updated: August 15, 2002 • (c) pminnesma, 2002 stop

More Related