Laboratory exercises for WEB/HTML
Anders Ardö
Department of Electrical and Information Technology
Lund University
Contents
1 World Wide Web - WWW / HTML / CSS 3
2 Appendix - css2.html 11
1
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Laboratory exercises for WEB HTML, Exercises of Web Programming and Technologies
What is HTML, sample code and lab assignments
Typology: Exercises
2021/2022
1 / 11
This page cannot be seen from the preview
Don't miss anything!
Related documents
Partial preview of the text
Download Laboratory exercises for WEB HTML and more Exercises Web Programming and Technologies in PDF only on Docsity!
Laboratory exercises for WEB/HTML
Anders Ardö
Department of Electrical and Information Technology
Lund University
Contents
1 World Wide Web - WWW / HTML / CSS 3
2 Appendix - css2.html 11
- HTML tags are keywords surrounded by angle brackets like
- HTML tags normally come in matched pairs like and
- The rst tag in a pair is the start tag, the second tag is the end tag
- Start and end tags are also called opening tags and closing tags
- For some special HTML tags, start tag and end tag can combined, eg
HTML Documents = Web Pages
- HTML documents describe web pages
- HTML documents contain HTML tags and plain text
- HTML documents are also called web pages
Example:
This is my homepage.
Here is start-tag and end-tag. Tags will in this case mean that the text "This is my homepage." is a heading of type 1. All HTML documents have certain basic standard tags. These are , , and <body> and corresponding end tags. A brief HTML documents with such standard tags may look like the complete example below.
<html> <head> <title>First Web-page
HTML is simple to learn All new students are welcome to LTH
Here you will learn a lot!
Below are the tags used in the document above and a few more tags. It does not matter if you use lowercase or uppercase when writing HTML code. will be interpreted in the same way as . In XHTML all tags should be lower case.
This tag tells your browser that the le contains HTML-coded information. Each HTML docu- ment begins and ends with this tag.
HTML documents can be fundamentally divided into two parts, a head and a body. The ... contains the title, metadata, and information on style sheets and scripts, while the ... contains the markup with the visible content.
The title is the name of the page and displayed in the browser's window bar, it does not appear inside the window. The tag has to be in the head part of an HTML document.
<body>
The tag <body> ... </body> identi es the body of a HTML document. This part contains the information that the browser will show on the screen.
<h1>
HTML has six levels of headings, numbered from 1 to 6, where 1 is the one with the largest font. The text enclosed by <h1> ... </h1>, is therefore the biggest heading the browser can display. Headings are shown by a browser bold face with a bigger font.
<a href="http://www.lth.se/">LTH</a>
The <a> tag is used to create a hypertext link. The example above is displayed as the clickable text LTH. Clicking on it leads to the LTH home page (which has the URL http://www.lth.se/).
<br />
A browser does not take into account whether you have put carriage returns (CR) in your HTML code. You have to use a tag <br /> to break a line and get to the next line. <br /> stands for 'BReak'. If we had not used a <br />-tag, the two lines All new students are welcome to LTH and Here you will learn a lot! would have ended up on the same line, next to each other. If you want to not only break a line but start a new paragraph use the tag <p> ... </p>.
<img src="bild.format" />
With the above command, you can include a picture in your website. Source, 'src', is the path of the source le with the image you want to show. Adding alt="some text" in the tag gives the browser a text to display if it can't download your image. Note that the image is not part of the HTML document. Your web browser will download and add the image to the web page built from the code in the HTML document. Example:
<img src="minbild.jpg" alt="This is my image." />
If the image is in the same directory as the HTML le, you only write the le-name, otherwise you should also specify a path. Since directory structure in the Web server is not the same as on the computer, it's easiest to store the les that make up a web page in the same directory as the HTML document. You can then use so-called relative addressing, and are not dependent on how the other le structure looks like. Relative addressing is when you enter the path to les starting in the directory where the HTML document is.
- bold-face text
- lists
- internal (inside a Web page) hyperlink with anchor-text
- external hyperlink with anchor-text
1.5.2 Metadata
- What are metadata used for?
- Add the following metadata elements to a Web page you created: keywords, description, and author.
- Add a tooltip to a link. Check that it works!
1.5.3 Multimedia
Copy some multimedia les to your Web folder, at least one picture and one video.
- Add an image in one of your pages
- Add a video in one of your pages. (hint: Check out the tags '', '', and '' at the w3Schools HTML Videos page at http://www.w3schools.com/html/html_videos.asp
1.5.4 Cascading Style Sheets - CSS
Review the CSS tutorial Starting with HTML + CSS (from the literature list) at http://www.w3.org/Style/Examples/011/ rstcss.en.html or another introduction to CSS. If you want to control how a HTML le should be presented when it is displayed in the browser, we often use Cascading Style Sheets (CSS). There you can describe in detail how the page will be presented when it is displayed.
- Take one of your pages (with bold-face text) and add an inline CSS style sheet (in the section) that make bold-face text use a larger font size. The style sheet can look like this
- Change the style sheet to make the bold-face text red on a blue background.
- Add another piece of text in bold-face, but make it belong to a dierent class than your previous bold text. (Example more text to view) Make text like that (but not your other bold-face text) use a smaller font than normal and be blue on a red background.
1.5.5 External CSS les
Suppose we want the text in the headings that are tagged with to be in a special font and red. Then you can write a CSS le (called e.g. mystyle.css) that contains the following line: h1 {color: red; font-family: sans-serif} Then you add the following tag in the head- section of the HTML le:
- Do this for your page above. The le mystyle.css should be in the same folder as your HTML- le.
1.5.6 CSS placement
You can also specify where the text is placed. Study the css2.html le (shown in the Appendix 2 below and also available on the ome page of the course in a text editor and see how it looks when you open it in a browser. Here the CSS code is entered directly in the le header. Study the CSS code and try to determine what it is supposed to do. It might help to look up the box model of CSS (see gure 1) in your reference literature.
Figure 1: CSS box model. From Cascading Style Sheets: The De nitive Guide, 3rd ed by E. Meyer.
- Try to gure out how to put a yellow bar that will contain a header (made with such ... ) that extends along the entire width of the page, which is located above the two elds that are already.
- Change to a font without serifs in the blue bar by changing the CSS code!
- Examine what happens if you change the value of the padding.
I Normal text link
II Link into the middle of Page B (hint: see fragment links at http://www.simplehtmlguide.com/linking.php)
III Image that links to a page
IV Hotspot image link (hint: see image-map at http://www.w3schools.com/tags/tag_map.asp)
1.6.1 HTML and CSS validation
- Validate your HTML pages. Use the HTML validator at http://validator.w3.org/. Here you can upload your page as a le, and automatically get comments and errors, if any. Make sure there are no errors or comments on your pages.
- Validate your CSS code. Use the CSS validator at http://jigsaw.w3.org/css-validator/.
1.6.2 Include links to some of the other lab-groups
Add a link to at least one of the other lab groups web pages.
2 Appendix - css2.html
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
This text ought to be placed to the left on the web page, if not something may be wrong.
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'