Web front end development environment configuration and HTML Foundation

catalogue

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:

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.      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

  1. 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&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;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.  

Tags: html5

Posted by Atomic Taco on Sat, 16 Apr 2022 16:58:24 +0930