程序代写代做代考 go html Universidad Carlos III de Madrid Bachelor in Computer Science and Engineering

Universidad Carlos III de Madrid Bachelor in Computer Science and Engineering
Escuela Politécnica Superior
User Interfaces Computer Science and Engineering Course 2020 / 2021
WEB TECHNOLOGIES – HTML5 & CSS3
Table of contents
User Interfaces
WEB TECHNOLOGIES – HTML5 & CSS3………………………………………………………………………………. 1 TABLE OF CONTENTS …………………………………………………………………………………………………………… 1
1.
2.
3. 4.
5.
INTRODUCTION …………………………………………………………………………………………………………. 2
ESTIMATED EFFORT ……………………………………………………………………………………………………………… 2 SUBMITTING THE EXERCISES ………………………………………………………………………………………………….. 2 ASSESSMENT ……………………………………………………………………………………………………………………… 2 ORGANIZATION OF THE DOCUMENT……………………………………………………………………………………….. 2
WEBSITES……………………………………………………………………………………………………………………. 3
HYPER TEXT MARKUP LANGUAGE (HTML) ………………………………………………………………………………. 3 CASCADE STYLE SHEETS (CSS)……………………………………………………………………………………………… 3
EXERCISES ………………………………………………………………………………………………………………….. 5
DESCRIPTION OF THE EXERCISES………………………………………………ERROR! BOOKMARK NOT DEFINED.
RULES ……………………………………………………………………………………………………………………….. 10
CONDUCTING THE EXERCISES………………………………………………………………………………………………. 10 SUBMITTING THE EXERCISES ………………………………………………………………………………………………… 10
REFERENCES …………………………………………………………………………………………………………….. 11
1 de 11

Universidad Carlos III de Madrid Bachelor in Computer Science and Engineering Escuela Politécnica Superior User Interfaces
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-to- face. 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 de 11

Universidad Carlos III de Madrid Bachelor in Computer Science and Engineering Escuela Politécnica Superior User Interfaces
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.
3 de 11

Universidad Carlos III de Madrid Bachelor in Computer Science and Engineering Escuela Politécnica Superior User Interfaces
– 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].
4 de 11

Universidad Carlos III de Madrid Bachelor in Computer Science and Engineering Escuela Politécnica Superior User Interfaces
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), each
5 de 11

Universidad Carlos III de Madrid Bachelor in Computer Science and Engineering
Escuela Politécnica Superior
User Interfaces
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
6 de 11

Universidad Carlos III de Madrid Escuela Politécnica Superior
TABLET
MOBILE
We encourage http://www.w3schools.com/html/html_examples.asp to complete this exercise, namely:
• HTML Layouts introduces the usage of DIV element with several examples.
Bachelor in Computer Science and Engineering User Interfaces
you to look at
7 de 11

Universidad Carlos III de Madrid Bachelor in Computer Science and Engineering Escuela Politécnica Superior User Interfaces
• New Elements in HTML5 – Explanation about the new HTML5 elements.
• HTML5 Semantic Elements addresses important elements for this exercise such as