Engineering讲解、辅导HTML/CSS语言、辅导web程序设计

- 首页 >> C/C++编程
Universidad Carlos III de Madrid
Escuela Politécnica Superior
Bachelor in Computer Science and Engineering
User Interfaces
1 de 11
User Interfaces
Computer Science and Engineering
Course 2020 / 2021
WEB TECHNOLOGIES – HTML5 & CSS3
Table of contents
WEB TECHNOLOGIES – HTML5 & CSS3........................................................................................... 1
TABLE OF CONTENTS ........................................................................................................................... 1
1. INTRODUCTION ......................................................................................................................... 2
ESTIMATED EFFORT.............................................................................................................................. 2
SUBMITTING THE EXERCISES ................................................................................................................. 2
ASSESSMENT ....................................................................................................................................... 2
ORGANIZATION OF THE DOCUMENT..................................................................................................... 2
2. WEBSITES..................................................................................................................................... 3
HYPER TEXT MARKUP LANGUAGE (HTML) ........................................................................................... 3
CASCADE STYLE SHEETS (CSS)............................................................................................................ 3
3. EXERCISES ................................................................................................................................... 5
DESCRIPTION OF THE EXERCISES......................................................ERROR! BOOKMARK NOT DEFINED.
4. RULES .........................................................................................................................................10
CONDUCTING THE EXERCISES.............................................................................................................10
SUBMITTING THE EXERCISES ...............................................................................................................10
5. REFERENCES .............................................................................................................................11
Universidad Carlos III de Madrid
Escuela Politécnica Superior
Bachelor in Computer Science and Engineering
User Interfaces
2 de 11
1. Introduction
This document presents the first programming exercise of the course. This
exercise aims at providing you with a hands-on introduction to emerging web
technologies: HTML5 and CSS3. We give a succinct overview of these
technologies and their specifications in Section 2. Subsequently, we present
an exercise in which you will create a web page and become familiar with
basic and more advanced aspects of HTML5 and CSS3. We set below the
conditions under which the exercises will be conducted.
Estimated effort
The estimated number of hours each student will need to devote to
conducting the exercises is 10, which will be distributed along three working
weeks and three sessions. The sessions will take place either online or face-toface.
In the sessions we will (i) introduce the technologies to the students, (ii)
go through a number of examples and (iii) solve general doubts or concerns.
Submitting the exercises
This exercise will be submitted on the fourth week of the course (see the
calendar of the labs available in Aula Global) during the session.
Assessment
In this exercise, we will evaluate: functionality (i.e. what you are asked to do),
code (e.g. can a person who is not you understand the code? Have you
written comments in the code?) and user interface design (e.g. think about a
human user interacting with your page – colors, size of text…)
This exercise corresponds to 10% of the final mark. Students will not pass the
course if they either copy the exercise from web pages or from another group
or allow them to copy their exercises.
Organization of the document
This document is divided into four sections. Section 2 gives an overview of
HTML5 and CSS3. Section 3 describes the exercise and the submission
procedure. Section 4 describes the realization and submission of the
programming exercise.
2. Websites
A website consists of web pages and resources, both hosted in the same
domain, which are accessed through a web navigator by using HTTP
(Hypertext Transfer Protocol). Static websites can be defined as a number of
web pages, which are written in HTML and CSS (Cascade Style Sheets), whose
content is both stored and processed in web servers, who manage requests
from clients.
Hyper Text Markup Language (HTML)
HTML stands for Hyper Text Markup Language. HTML is a language designed
to give some structure to web pages and present their information. This is
done by means of mark-up tags (e.g. ). One of the main problems of
HTML is that an HTML document is not aware of its content. HTML is defined
by W3C (www.w3c.org).
HTML5 is the fifth revision of the HTML standard. Its core aims have been to
improve the language with support for the latest multimedia while keeping it
easily readable by humans and consistently understood by computers and
devices.
For further information about HTML, the HTML tutorial of the w3schools [1]
provides a number of interactive examples of the main characteristics of
HTML. The HTML elements and attributes are defined in the HTML
specification [2]. The most recent version of the HTML5 specification can be
found in [3]
Cascade Style Sheets (CSS)
CSS (Cascade Style Sheets) allow us to group HTML elements into categories.
These categories enable us to reuse and simplify the HTML code. For
example, the color and size of HTML elements can be defined in CSS style
sheets, which are usually coded in CSS files and linked to HTML, which is used
for defining the structure of the webpage. Nowadays, there are three versions
of CSS, CSS1, CSS2 and CSS3.
The main objectives of the CSS specification are to:
- solve the problem of HTML regarding the separation of content and
presentation. HTML was originally designed to define the content of a
web page. Over time, a number of attributes have been added to the
specification, increasing the complexity of web pages. CSS was created
after HTML 4.0 with the aim of making the separation between content
and styles clearer.
- help the web programmer by reusing styles and simplifying the HTML
code of web pages.
For further information on CSS, the tutorial of w3schools [4] provides a
number of interactive examples [5]. The official specifications provide further
information of CSS1 [6] and CSS2 [7], and a reference manual of HTML and
CSS can be found in [8].
3. Exercise
The aim of this exercise is to become familiar with the main elements of
HTML5 and CSS3. In this section, we will describe the assignment with
examples as references (YOU DON’T HAVE TO COPY THEM), as well as some
useful resources.
IMPORTANT: The exercise must have the style of the web page in an
external CSS style sheet linked to the HTML document.
Assignment
The website to develop is the page of an academic online course accessed by
a teacher.
The web page will be divided into four sections: i) heading with a menu, ii)
body, and iii) footer. These sections must be as follows:
• The page heading will display a logo and/or a title, and a horizontal
menu. The menu will include at least three options.
• The body section of the page will be divided into three vertical
containers.
o The container on the left and the one on the right will be each
25% of the body section's total width. The container on the left
will show the name of the course and a menu with these three
options: "Students", "Forum", and "Grades". The container on
the right will show last news (e.g., published assignments, new
messages in the forum, published resources, …) and next events
(e.g., next classes or assignments due date).
o The central container will be the remaining 50% of the body
section's total width, and initially, it will show a list of course
topics (minimum of three topics). Each topic will have a
representative image, a title, a short description (maximum five
lines), and three videos. Each video will have a title and a short
description (maximum of three lines).
o The central container's content will change depending on the
option of the menu in the left container.
§ When clicking the option "Students", the central container
will show students' list (minimum ten), each one with a
profile picture, name, surname, email, and an icon to
send a message. The icon will not work.
§ When clicking on the option "Forum", the central
container will show the list of themes (minimum five),
with a title, the number of messages, and the last
message's date and time.
§ When clicking on the option "Grades", the central
container will show a table with four columns and a
minimum of eleven rows. The first row will show the
headers of the columns: "student", "activity 1", "activity 2",
"activity 3". The remaining rows will contain the same
students from the previous list. For each student, each
activity will have a grade from 0.0 to 10.0.
• The page's footer will display at least three links (e.g., the copyright
and the privacy policy) separated by a vertical line.
• The website has to be responsive and adaptable to the dimensions of
the browser. Within this scope, you have to implement almost two
breakpoints: the first one for the tablet (768px) and the second one for
the smartphone (600px).
• The website and its tablet and mobile versions have to be similar to the
images, but not the same. IMPORTANT: It is mandatory to personalize
the colors, the texts, and the icons shown on the page. The information
in the page (i.e., logo, titles, images, texts, links, …) has to be real. No
fictitious content will be accepted, such as the text "Lorem ipsum".
DESKTOP
TABLET
MOBILE
We encourage you to look at
http://www.w3schools.com/html/html_examples.asp to complete this
exercise, namely:
• HTML Layouts introduces the usage of DIV element with several
examples.
Universidad Carlos III de Madrid
Escuela Politécnica Superior
Bachelor in Computer Science and Engineering
User Interfaces
8 de 11
• New Elements in HTML5 - Explanation about the new HTML5
elements.
• HTML5 Semantic Elements addresses important elements for this
exercise such as
,
and

• HTML Images provides examples of how to manage pictures in
HTML documents.
• HTML Links provides examples of how to include links to other HTML
pages.
• HTML Styles provides examples of how to modify the style of HTML
elements.
• HTML Video – Ejemplos sobre como incluir videos en una página
web.
• CSS Floating introduces the positioning of the elements.
• CSS Margin explains how to specify the margins of an element.
• CSS Padding explains how to specify the content of an element.
• CSS Navigation Bar provides examples about the navigation menu of
the page.
• RWD Viewport introduces the viewport property.
• RWD Media Queries introduces the usage of the media queries.
• RWD Images introduces the properties to make the images
responsive.
Universidad Carlos III de Madrid
Escuela Politécnica Superior
Bachelor in Computer Science and Engineering
User Interfaces
9 de 11
4. Materials
Editors of web pages such as Macromedia Dreamweaver can’t be used, since
the aim of these exercises is to get familiar with HTML and CSS. However, we
encourage you to use a free text editor such as Notepad++, HTML-Kit, Visual
Studio Code, Sublime Text, Brackets o Atom. None of the lecturers will help
you to use these tools.
Universidad Carlos III de Madrid
Escuela Politécnica Superior
Bachelor in Computer Science and Engineering
User Interfaces
10 de 11
5. Rules
The realization and submission of the programming exercise is guided by the
following set of rules. If you do not comply with them, your mark won’t be
more than 3 in the exercise.
Conducting the exercises
The exercise will be carried out in groups of two people.
The members of each group will belong to the same lab group.
The members of the group cannot be altered throughout the course.
The exercise will be carried out by using HTML5 and CSS3.
The exercises will be tested with either Mozilla Firefox version 79 (or above)
or Chrome 84 (or above).
IMPORTANT: The resolution of problems of a particular nature will be made
during office hours.
Submitting the exercises
The exercise will be submitted during the day of the session indicated in the
introduction of this document. Exercises submitted afterwards will not be
considered.
The submission norms are:
• All the files will be submitted through Aula Global.
• All the files will be either zip or rar files, with the following filename:
PE01_grXX.zip
• XX is the ID of your group. For example, group 5 will submit as:
PE01_gr05.zip
The zip or rar files will have the following structure:
• Ex. Root folder. HTML files.
• Ex/style. CSS styles.
• Ex/images. Images and material.
Universidad Carlos III de Madrid
Escuela Politécnica Superior
Bachelor in Computer Science and Engineering
User Interfaces
11 de 11
6. References
[1] “HTML Tutorial”, HTML Tutorial, W3 Schools:
http://www.w3schools.com/html/
[2] “HTML 4.01 Specification”: http://www.w3.org/TR/html4
[3] “HTML5”, http://www.w3.org/TR/html5/
[4] “CSS Tutorial”, http://www.w3schools.com/css/
[5] “CSSPlay”, http://www.cssplay.co.uk/index.html
[6] “Cascading Style Sheets, level 1”, http://www.w3.org/TR/REC-CSS1
[7] “Cascading Style Sheets, level 2”, http://www.w3.org/TR/REC-CSS2
[8] “HTML5 and CSS3: Visual QuickStart Guide, Seventh Edition”
Elizabeth Castro; Bruce Hyslop. Ed. PeachPit Press, 2011

站长地图