1 / 155

HTML basics exercises

HTML basics exercises. Presentation Overview. Look at main technological components that make up modern Web pages HTML – HyperText Markup Language CSS – Cascading Style Sheets JavaScript JavaScript For each component What it is/isn't, can/can't do What kinds of constructs it comprises

berthae
Download Presentation

HTML basics exercises

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 basics exercises

  2. Presentation Overview • Look at main technological components that make up modern Web pages • HTML – HyperText Markup Language • CSS – Cascading Style Sheets • JavaScript JavaScript • For each component • What it is/isn't, can/can't do • What kinds of constructs it comprises • How to use it in Web pages • How it interacts with other components

  3. HTML Components • Documents • Document = page = HTM file = topic • Content (text, images) • Tags (display commands) • Other terms • Window: browser display window • URL: Uniform Resource Locator • Hyperlink: hypertext jump to a resource • Resource: URL, image, mailto, external file

  4. HTML Pages • HTML pages are tag-based documents • Really plain ASCII text files • Don't look like documents they represent • Tags indicate how processing program should display text and graphics • Designed to describe hypertext, not paper • Processed by browsers "on the fly" • Tags usually appear in pairs • Most have reasonable names or mnemonics • Most can be modified by attributes/values

  5. START TAG END TAG <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> <H1>, <H2>, ... </H1>, </H2>, ... <IMG ...> </IMG> (optional) <A ...> </A> <P> </P> (optional) <BR> (none; "empty" tag) <OL> </OL> <UL> </UL> <LI> </LI> (optional) Some HTML Tag Examples

  6. HTML Document Layout • Example of basic tag positioning • Always think containers! • Tag pairs that enclose content <html> <head> <title>Title bar text</title> </head> <body> <p>Look, I'm a paragraph!</p> </body> </html>

  7. Some Common Text Tags • Heading levels • h1 – h6, numbers inverse to text size<h1>Heading One</h1> <h2>Heading One</h2> • Paragraph • Probably the most common tag<p>Yada yada yada...</p> • Line break (an empty tag) • Used when <p>'s white space not wantedThis line will break<br>right there • Note white space or lack thereof in HTML source does not matter!

  8. Attributes and Values • Properties, qualitys, or characteristics that modify the way a tag looks or acts • Usually in pairs: <body bgcolor="teal"> • Sometimes not: <dl compact> • Most HTML tags can take attributes • Format of value depends on attribute • width="150" ... href="page3.htm"notwidth="page3.htm" ... href="150"

  9. The Anchor Tag (1) • The tag that puts the HTM in HTML • <a> ... </a> (useless by itself) • Must have attributes to be useful • HREF (Hypertext REFerence) attribute • Makes a jump to someplace (URL)<a href="mypage.htm">My Page</a><a href="www.google.com">Google</a> • Link text is underscored by default • Whatever is between <a> and </a> is hot (clickable) • Clicking makes the link go somewhereor do something

  10. The Anchor Tag (2) • Some link examples text only image only both

  11. Images (1) • Used in pages for various reasons • Clarification, navigation, peripheral training • Images not in page; referenced by page • Graphics are separate, required files • Usually GIFs or JPGs, sometimes others • Can be anywhere in document body: in paragraphs, headings, lists, anchors, etc. • Place image with <img> tag • Like <a>, <img> is useless by itself • All work is done with attributes/values

  12. Images (2) • Main attribute: SRC • Tells page where to find the image • File name can be local, relative, or full • Case sensitivity depends on server • Animated GIFs added same as static <img src="smiley.gif"> <img src="./pix/mypic.jpg"> <img src="http://www.myweb.com/mail.gif">

  13. Overview • Web documents • Server-side programming • Client-side programming • Web services

  14. Dynamic vs. Static Web Sites Web pages can be either static or dynamic. "Static" means unchanged or constant, while "dynamic" means changing or lively. Therefore, static Web pages contain the same prebuilt content each time the page is loaded, while the content of dynamic Web pages can be generated on-the-fly. • What is Web content? Content is everything that can appear on a Web page: text, graphics, form fields, hyperlinks to other pages, navigation buttons, menus, etc.

  15. Advantages of static websites • Quick to develop • Cheap to develop • Cheap to host Disadvantages of static websites • Requires web development expertise to update site • Site not as useful for the user • Content can get inactive

  16. Advantages of dynamic websites • Much more practical website • Much easier to update • New content brings people back to the site and helps in the search engines • Can work as a system to allow staff or users to collaborate • Disadvantages of dynamic websites • Slower / more expensive to develop • Hosting costs a little more

  17. Standard HTML pages are static Web pages. Each time an HTML page is loaded, it looks the same. The only way the content of an HTML page will change is if the Web developer updates and publishes the file • Other types of Web pages, such as PHP, ASP, and JSP pages are dynamic Web pages. These pages contain "server-side" code, which allows the server to generate unique content each time the page is loaded. • database information, which enables the page's content to be generated from information stored in the database. Websites that generate Web pages from database information are often called database-driven websites.

  18. You can often tell if a page is static or dynamic simply by looking at the page's file extension in the URL, located in the address field of the Web browser. If it is ".htm" or ".html," the page is probably static. • If the extension is ".php," ".asp," or ".jsp," the page is most likely dynamic. While not all dynamic Web pages contain dynamic content, most have at least some content that is generated on-the-fly.

  19. <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> </head> <body> سلام </body> </html>

  20. Quiz on HTML 1. What is the code for creating a red background in an HTML document?   2. What will the tag <b> do? 3. What command would you use to put a blank line in a program? 4. Write the code that displays a graphic file called "DOG.PNG", that is 200 by 400 pixels and is left justified. 5. Write the code to create a hyper-link to the Greenpeace homepage, where their address is "www.greenpeace.org". 6. Write the code for a two-by-two table and is numbered 1-4. 7. Fix any errors in the following code. <html> <head> <title>My first page </head> <body>

  21. HMTL stands for hypertext markup language useful for developing web pages.Using HTML we can add paragraphs, headings, images into web pages.

  22. Hyperlink A hyperlink is a structure unit that connect two WebPages. This connection is realized by inserting a hyperlink which indicates the URL of destination page. If there is a hyperlink from page P to page Q, the P is called a parent of Q and Q is called a child of P. If two pages have at least one common parent page, the two pages are called Siblings Thursday, January 2, 2020 Dr.kamaran HamaAli

  23. Simple website structure Index.html 234 2.html 134 3.html 12 4 4.html 1 2 3 Thursday, January 2, 2020 Dr.kamaran HamaAli

  24. Html- hypertext reference(href) The href attribute defines references that link to basically this is where the user will be taken if they wish to click this link Thursday, January 2, 2020 Dr.kamaran HamaAli

  25. Hypertext Reference Local Link to another pages within your domain Internal Link to anchors on the page Global Link to another domain at side of your side Thursday, January 2, 2020 Dr.kamaran HamaAli

  26. internal <html> <body> <h2 id="top">Top of page!</h2> <p></p> <a href="#top">Go to top</a> </body> </html>

  27. local <a href="file:///C:/Users/Kamaran%20Faraj/Documents/My%20Web%20Sites/index.htm">LEC</a> <a href="new_page_1.htm">LEC1</a> <a href="new_page_2.htm">LEC2 </a>

  28. global < a href=http://www.southbank.ac.uk> http://www.southbank.ac.uk </a>

  29. Test Page: • Your <BODY> tag: <BODY BGCOLOR="#ffffff" BACKGROUND="" TEXT="#000000" LINK="#0000ff" VLINK="#663399" ALINK="#ff0000"> • Add font size & face attributes and bold & italic tags to your documents as needed. Also be sure to move your background image. 

  30. TEXT which sets the color of text on the web page LINK which sets the color of links you haven't followed VLINK which sets the color of links you have followed ALINK which sets the color of links as you click on them

  31. HTML - What is image mapping in HTML?  Making one image link to several pages is called as image mapping.For example, if you have a map of Kurdistan , then clicking on a state can take to to another page and likewise for other states. 

  32. Search engine optimization

  33. navigation • <!DOCTYPE html> • <html> • <body> • <nav> • <a href="/html/">HTML</a> | • <a href="/css/">CSS</a> | • <a href="/js/">JavaScript</a> | • <a href="/jquery/">jQuery</a> • </nav> • </body> • </html>

  34. Web Site Creation Using Template Using Wizards From the Basics Dr. kamaran Faraj 37

  35. Planning your site online In order to be able to upload a web Page to the Internet, it's necessary to hire a web hosting company to make your web site available to others on the internet 24 hours a day. The price to have your own space on their servers will depend on the company, the space on disk you need, For these reasons, it is not recommended to use a free hosting for a bussiness Page, although it is acceptable for a personal one.

  36. There are companies that offer this service for free, but with certain limitations: just a few disk space, slowness and a name for our Page preceded by their own etc... • It's also necessary to consider that these companies must generate income in some way it is the reason why they are dedicated to sell advertising spaces within your Pages, ads that we'll not be able to avoid including in our web Pages.

  37. When we are going to hire a web hosting service it is necessary to also contract a domain, a task which usually is in charge of the hosting company. To register a domain consists of registering a name for our Page. This name cannot be repeated in Internet, has to be unique, as happens with the names of the companies. It's possible to register the same name with different extensions, like for example, .net, .org, .biz or .com.

  38. A worldwide collection of electronic documents Also called the Web Each electronic document is called a Web page Can contain text, graphics, audio, video, and built-inconnections A Web site is a collection of related Web pages The World Wide Web • What is the World Wide Web (WWW)?

  39. MicrosoftInternetExplorer Netscape Firefox Opera Safari The World Wide Web • What is a Web browser? • Program that allows you to view Web pages

  40. The World Wide Web • What is a home page? • The first page that a Web site displays • Often provides connections to other Web pages

  41. co com ac edu gov org Domainname www.gtslearning. is the domain name of the server. .co identifies the website as a commercial organisation. It is convention that commercial sites use co or com ac or edu (for academic or education) gov and org use for governmental or non-profit organisations . .co.uk indicates that the site belongs to a commercial organisation registered in the UK

  42. <HTML> • <HEAD> • <TITLE>Eat healthy and live healthy</TITLE> • </HEAD> • <BODY LINK="Green" ALINK="Blue" VLINK="Red"> • <CENTER> • <H1> • <FONT COLOR="maroon">KHAO PIYO RESTAURANT</FONT> • </H1> • </CENTER> • <IMG SRC="RESTAURANT. jpg" ALIGN="right" HEIGHT=225 • WIDTH=250> • <FONT COLOR="purple" SIZE=5> • Collect information for • <UL> • <LI><A HREF="one.html">menus</A> • <LI><A HREF="two.html">reservation</A> • <LI><A HREF="three.html">catering</A>

  43. <LI><A HREF="four.html">tours</A> • </UL> • </font> • <font size =5> • <CENTER> • <TABLE BORDER=2 BORDERCOLOR="blue" > • <font color =blue><CAPTION> Menus available are</CAPTION></font> • <TR> • <TD> 1 • <TD> INDIAN • <TR> • <TD> 2 • 11 • <TD> ITALIAN • <TR> • <TD> 3 • <TD> CONTINENTAL • <TR> • <TD> 4 • <TD> THAI • </TABLE> • </CENTER> • <BR> • For further enquiries and reservations <A HREF="mailto:abc@xyz.com">Contact Us</A> • </font> • </BODY> • </HTML>

  44. Internet Database Web Server Web Client Server-side Programming Skills that are often required: • CGI • PHP • ASP • Perl • Java Servlet, … Client-side Programming Skills that are often required: • XHTML • Javascript • Java • Dreamweaver • Flash • SMIL, XML …

  45. You create your web site on your hard drive, but you will place or publish your files on a web server so they will be accessible via the web. This means that you will have to arrange with a company that has a web server to accept or host your site.

More Related