catalogue
Experimental topic: Web front end development environment configuration and HTML Foundation
Project 1 # writing web pages using HBuilder
Item 2: use of meta tag and body tag attributes
Item 3: HTML integrated programming
Extracurricular development training
Experimental process and results:
Project 1 # writing web pages using HBuilder
Item 2: use of meta tag and body tag attributes
Item 3: HTML integrated programming
Extracurricular development training I
Extracurricular development training II
Experimental topic: Web front end development environment configuration and HTML Foundation
Objective: to be familiar with the development environment and the compilation and browsing of HTML documents
Test requirements:
1. Use HBuilder to write web pages
- 1. Page rendering, as shown in figure 1-1-3.
Figure 1-1-6 effect drawing of web page design
2. The text material of the page is as follows:
I, born in August 1997 in Beijing, majored in software engineering of mobile Internet college. I am very happy. Class: 17 software, student number: 1709200199 & nbsp& nbsp; Name: Li Xin.
2. Use of meta tag and body tag attributes
1. The page effect is shown in figure 1-1-13.
Figure 1-1-13 effect of meta and body tag attribute application page
2. Paragraph text material
Mozilla Firefox is a web browser developed by the Mozilla foundation and the open source community. Firefox 28 is new, from Fire arc official Chinese website Download the latest version of Firefox, the Firefox browser, with the fastest and safest Internet experience.
3. HTML integrated programming
1. Text material of paragraph
Responsibilities of WEB front-end development engineer: (1) assist the system architecture designer in system architecture design; (2) · undertake the design and implementation of WEB front-end core module; (3) Undertake major development work and be responsible for code quality and progress; (4) Participate in key technology verification and technology selection; (5) Communicate with product manager and determine product development requirements.
2. The page effect is shown in figure 1-1-14.
Fig. 1-1-14 effect diagram of combined programming of three technologies
Extracurricular development training
- The page effect is shown in figure 1-1-15.
Figure 1-1-15 application of meta, h3, hr, p and other marks
The text material of the page is as follows:
The HTML standard has been published since html4.0 in December 1999 After 2001, the subsequent HTML5 and other standards were shelved. In order to promote the development of Web standardization movement, some companies joined hands and established an organization called Web Hypertext Application Technology Working Group (WHATWG).
2. The page effect is shown in figure 1-1-16.
Figure 1-1-16 application of body attribute and annotation mark
The text material of the page is as follows:
HTML (Hyper Text Mark up language), namely hypertext markup language, is the description language of WWW, which was proposed by Tim Berners Lee. The purpose of designing HTML language is to easily connect the text or graphics stored in one computer with the text or graphics in another computer to form an organic whole. People don't have to consider whether the specific information is on the current computer or other computers on the network.
Experimental process and results:
Project 1 # writing web pages using HBuilder
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple homepage design for Freshmen</title>
<style type="text/css">
p{
font-size:24px; /*Font size 24px */
color:blue; /*Font color blue */
text-indent:2em; /*Indent the first line by 2 characters */
}
</style>
</head>
<body>
<h2 align="center">Welcome to my easy home page</h2>
<hr color="red">
<p align="center">I, born in August 1997 in Beijing, majored in software engineering of mobile Internet college. I'm very happy to be admitted.<br />
Class: 17 software, student number: 1709200199 Name: Li Xin</br>
</p>
</body>
</html>
design sketch:
Item 2: use of meta tag and body tag attributes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>meta Marking body Tag attribute application</title>
<style type="text/css">
p{text-indent: 2em;}
body{background-color: lightcyan;}
a{color: red;}
</style>
</head>
<body text="#000050">
<h2 align="center">meta Marking body Tag attribute application</h2>
<hr >
<p>Mozilla Firefox By Mozilla A web browser developed by the foundation and the open source community. Firefox 28 New release, from<a href="http://www.firefox. com. Cn / "> download the latest version of Firefox Firefox browser from the official Chinese website of fire arc < / a >, which has the fastest and safest online experience</p>
</body>
</html>
design sketch:
Item 3: HTML integrated programming
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Job introduction of front-end development</title>
<style type="text/css">
h2{color: red;}
body{font-family: Song style;}
p{text-indent: 2em;}
</style>
</head>
<body>
<h2 align="center">Web Job introduction of front-end development</h2>
<hr color="#33CC33">
<p>WEB Responsibilities of front-end development engineer:(1)Assist the system architecture designer in system architecture design;(2)bear WEB Design and implementation of front-end core module;(3)Undertake major development work and be responsible for code quality and progress;(4)Participate in key technology verification and technology selection;(5)Communicate with product manager and determine product development requirements.</p>
<script type="text/javascript">
alert("Web Front end development engineers have good employment prospects and high salary!");
</script>
</body>
</html>
design sketch:
Extracurricular development training I
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Application of common tags</title> <style type="text/css"> </style> </head> <body> <h3 align="center">meta,h3,hr,p Application of equal markers</h3> <hr color="fuchsia"> <p> HTML The standard has been issued since December 1999 HTML4.01 Subsequent HTML5 And other standards have been shelved in order to promote Web With the development of the standardization movement, some companies united to form a group called Web Hypertext Application Technology Working Group (Web Hypertext Application Technology Working Group -WHATWG) Organization.</p> </body> </html>
design sketch:
Extracurricular development training II
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body Application of attribute and annotation Tags</title>
<style type="text/css">
body {
background-color: #0000FF;
color: #FFFFFF;
}
.div1 {
margin-top: 55px;
margin-left: 50px;
margin-right: 50px;
}
.div2 {
border-style: dashed;
border-color: #660033;
border-width: 1.3px;
margin-left: 50px;
margin-right: 50px;
}
</style>
</head>
<body>
<div id="" class="div1">
body Attribute application of
</div>
<div id="" class="div2">
stay div Insert title words, horizontal separators, and paragraphs in
<h2>Design color pages</h2>
<hr color="#00CC00">
<p> HTML(Hyper Text Mark-up Language)Hypertext markup language WWW Description language, by Tim Berners-Lee Proposed. Design HTML The purpose of language is to easily connect the text or graphics stored in one computer with the text or graphics in another computer to form an organic whole. People don't have to consider whether the specific information is on the current computer or other computers on the network.
</p>
<hr color="red">
</div>
</body>
</html>
design sketch:
A sophomore to share my experimental report. I'm not talented. Welcome to put forward your valuable opinions.