Engineering程序写作、辅导HTML/CSS语言程序

” Engineering程序写作、辅导HTML/CSS语言程序Universidad Carlos III de MadridEscuela Politcnica SuperiorBachelor in Computer Science and EngineeringUser Interfaces1 de 11User InterfacesComputer Science And EngineeringCourse 2020 / 2021WEB TECHNOLOGIES HTML5 CSS3Table of contentsWEB TECHNOLOGIES HTML5 CSS3………………………………………………………………………………. 1TABLE OF CONTENTS …………………………………………………………………………………………………………… 11. INTRODUCTION …………………………………………………………………………………………………………. 2ESTIMATED EFFORT……………………………………………………………………………………………………………… 2SUBMITTING THE EXERCISES ………………………………………………………………………………………………….. 2ASSESSMENT ……………………………………………………………………………………………………………………… 2ORGANIZATION OF THE DOCUMENT……………………………………………………………………………………….. 22. WEBSITES……………………………………………………………………………………………………………………. 3HYPER TEXT MARKUP LANGUAGE (HTML) ………………………………………………………………………………. 3CASCADE STYLE SHEETS (CSS)……………………………………………………………………………………………… 33. EXERCISES ………………………………………………………………………………………………………………….. 5DESCRIPTION OF THE EXERCISES………………………………………………ERROR! BOOKMARK NOT DEFINED.4. RULES ………………………………………………………………………………………………………………………..10CONDUCTING THE EXERCISES……………………………………………………………………………………………….10SUBMITTING THE EXERCISES …………………………………………………………………………………………………105. REFERENCES ……………………………………………………………………………………………………………..11Universidad Carlos III de MadridEscuela Politcnica SuperiorBachelor in Computer Science and EngineeringUser Interfaces2 de 111. IntroductionThis document presents the first programming exercise of the course. Thisexercise aims at providing you with a hands-on introduction to emerging webtechnologies: HTML5 and CSS3. We give a succinct overview of thesetechnologies and their specifications in Section 2. Subsequently, we presentan exercise in which you Will create a web page and become familiar withbasic and more advanced aspects of HTML5 and CSS3. We set below theconditions under which the exercises will be conducted.Estimated effortThe estimated Number of hours each student will need to devote toconducting the exercises is 10, which will be distributed along three workingweeks 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)Engineering作业写作、辅导HTML/CSS语言作业go through a number of examples and (iii) solve general doubts or concerns.Submitting the exercisesThis exercise will be submitted on the fourth week of the course (see thecalendar of the labs available in Aula Global) during the session.AssessmentIn 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 youwritten comments in the code?) and user interface design (e.g. think about ahuman user interacting with your page colors, size of text)This exercise corresponds to 10% of the final mark. Students will not pass thecourse if they either copy the exercise from web pages or from another groupor allow them to copy their exercises.Organization of the documentThis document is divided into four sections. Section 2 gives an overview ofHTML5 and CSS3. Section 3 describes the exercise and the submissionprocedure. Section 4 describes the realization and submission of theprogramming exercise.2. WebsitesA website consists of web pages and resources, both hosted in the samedomain, which are accessed Through a web navigator by using HTTP(Hypertext Transfer Protocol). Static websites can be defined as a number ofweb pages, which are written in HTML and CSS (Cascade Style Sheets), whosecontent is both stored and processed in web servers, who manage requestsfrom clients.Hyper Text Markup Language (HTML)HTML stands for Hyper Text Markup Language. HTML is a language designedto give some structure to web pages and present their information. This isdone by means of mark-up tags (e.g. body). One of the main problems ofHTML is that an HTML document is not aware of its content. HTML is definedby W3C (www.w3c.org).HTML5 is the fifth revision of the HTML standard. Its core aims have been toimprove the language with support for the latest multimedia while keeping iteasily readable by humans and consistently understood by computers anddevices.For further information about HTML, the HTML tutorial of the w3schools [1]provides a number of interactive examples of the main characteristics ofHTML. The HTML elements and attributes are defined in the HTMLspecification [2]. The most recent version of the HTML5 specification can befound 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. Forexample, the color And size of HTML elements can be defined in CSS stylesheets, which are usually coded in CSS files and linked to HTML, which is usedfor defining the structure of the webpage. Nowadays, there are three versionsof CSS, CSS1, CSS2 and CSS3.The main objectives of the CSS specification are to:- solve the problem of HTML regarding the separation of content andpresentation. HTML Was originally designed to define the content of aweb page. Over Time, a number of attributes have been added to thespecification, increasing the complexity of web pages. CSS was createdafter HTML 4.0 with the aim of making the separation between contentand styles clearer.- help the web programmer by reusing styles and simplifying the HTMLcode of web pages.For further information on CSS, the tutorial of w3schools [4] provides anumber of Interactive examples [5]. The official specifications provide furtherinformation of CSS1 [6] and CSS2 [7], and a reference manual of HTML andCSS can be found in [8].3. ExerciseThe aim of this exercise is to become familiar with the main elements ofHTML5 and CSS3. In this section, we will describe the assignment withexamples as references (YOU DONT HAVE TO COPY THEM), as well as someuseful resources.IMPORTANT: The exercise must have the style of the web page in anexternal CSS style sheet linked to the HTML document.AssignmentThe website to develop is the page of an academic online course accessed bya 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 horizontalmenu. The menu Will include at least three options. The body section of the page will be divided into three verticalcontainers.o The container on the left and the one on the right will be each25% of the body sections total width. The container on the leftwill show the name of the course and a menu with these threeoptions: Students, Forum, and Grades. The container onthe right will show last news (e.g., published assignments, newmessages 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 bodysections total width, and initially, it will show a list of coursetopics (minimum Of three topics). Each topic will have arepresentative image, a title, a short description (maximum fivelines), and three videos. Each video will have a title and a shortdescription (maximum of three lines).o The central containers content will change depending on theoption of the menu in the left container. When clicking the option Students, the central containerwill show students list (minimum ten), each one with aprofile picture, name, surname, email, and an icon tosend a message. The icon will not work. When clicking on the option Forum, the centralcontainer will show the list of themes (minimum five),with a title, the number of messages, and the lastmessages date and time. When clicking on the option Grades, the centralcontainer will show a table with four columns and aminimum of Eleven rows. The first row will show theheaders of the columns: student, activity 1, activity 2,activity 3. The remaining rows will contain the samestudents from the previous list. For each student, eachactivity will have a grade from 0.0 to 10.0. The pages footer will display at least three links (e.g., the copyrightand the privacy policy) separated by a vertical line. The website Has to be responsive and adaptable to the dimensions ofthe browser. Within this scope, you have to implement almost twobreakpoints: the first one for the tablet (768px) and the second one forthe smartphone (600px). The website and its tablet and mobile versions have to be similar to theimages, but not the same. IMPORTANT: It is mandatory to personalizethe colors, the texts, and the icons shown on the page. The informationin the page (i.e., logo, titles, images, texts, links, ) has to be real. Nofictitious content will be accepted, such as the text Lorem ipsum.DESKTOPTABLETMOBILEWe encourage you to look at https://www.w3schools.com/html/html_examples.asp to complete thisexercise, namely: HTML Layouts introduces the usage of DIV element with severalexamples.Universidad Carlos III de MadridEscuela Politcnica SuperiorBachelor in Computer Science and EngineeringUser Interfaces8 de 11 New Elements in HTML5 – Explanation about the new HTML5elements. HTML5 Semantic Elements addresses important elements for thisexercise such as section, article and header HTML Images provides examples of how to manage pictures inHTML documents. HTML Links provides examples of how to include links to other HTMLpages. HTML Styles provides examples of how to modify the style of HTMLelements. HTML Video Ejemplos sobre como incluir videos en una pginaweb. 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 ofthe 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 imagesresponsive.Universidad Carlos III de MadridEscuela Politcnica SuperiorBachelor in Computer Science and EngineeringUser Interfaces9 de 114. MaterialsEditors of web pages such as Macromedia Dreamweaver cant be used, sincethe aim of these exercises is to get familiar with HTML and CSS. However, weencourage you to use a free text editor such as Notepad++, HTML-Kit, VisualStudio Code, Sublime Text, Brackets o Atom. None of the lecturers will helpyou to use these tools.Universidad Carlos III de MadridEscuela Politcnica SuperiorBachelor in Computer Science and EngineeringUser Interfaces10 de 115. RulesThe realization and submission of the programming exercise is guided by thefollowing set of rules. If you do not comply with them, your mark wont bemore than 3 in the exercise.Conducting the exercisesThe 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 madeduring office hours.Submitting the exercisesThe exercise will be submitted during the day of the session indicated in theintroduction of this document. Exercises submitted afterwards will not beconsidered.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.zipThe 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 MadridEscuela Politcnica SuperiorBachelor in Computer Science and EngineeringUser Interfaces11 de 116. References如有需要，请加QQ：99515681 或邮箱：99515681@qq.com