current position:Home>Educoder web programming foundation autumn 2021 - HTML5 - text control class label

Educoder web programming foundation autumn 2021 - HTML5 - text control class label

2022-05-15 00:45:03is_ kevin_ cen

Be careful : All the topics are in one blog
Hey

The first 1 Turn off :html5- Page background and title paragraph labels

Task description
Our mission : Write a web page with a title and paragraph , And set the background image for the web page .

Related knowledge
In order to complete this mission , You need to master :1. Setting of web page background ,2. Title Tag ,3. Paragraph Tags .

Set Web page background
If you need an image as a web page background , Can be added in background attribute , Its attribute value is the path of the image .
Usage examples :

Set the background color of the web page
To add a background color to a web page , Can be added in bgcolor attribute , Its attribute value is color word or color code .
Usage examples :

Text title label
The text title label is a double label , Block-level elements , Used to specify the hierarchy of text content titles . stay HTML Provided in 6 Class title label , From the first level

Start to level six

, The font size decreases in turn .
By default , Show... In most browsers

The content of is larger than the default size of the text in the web page ,

The content of is basically the same size as the default text , and

and
The content of is smaller than the default text . You can set the alignment property of the text title .

Paragraph Tags
Paragraph Tags

It's a double label , Block-level elements , Used to define text content as a paragraph , The paragraph begins with a new line , And there is a blank line between the previous paragraph . You can set the alignment properties of paragraph text .

Related properties align The value of
left: Align left
center: Align center
right: Right alignment
justify: full-justified
Programming requirements
In the editor on the right Begin - End Supplement code in the area , The specific requirement is :
1. Add a background image to the web page , Graphic url The address is https://www.educoder.net/api/attachments/2308369
2. Put text “ Chapter one HTML5 Basics ” Set to first level title , Use center alignment ;
2. Put text “1.1 Text control tags ” Set to 2 Level title , Align left .
3. After the text “ This is the first 1 Paragraphs .” Set to a paragraph , Align both ends .

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title> Setting of Title paragraph </title>
 </head>
 <!-- ********* Begin ********* -->
 <body background="https://www.educoder.net/api/attachments/2308369">
    <h1 align="center"> Chapter one  HTML5 Basics </h1>
    <h2 align="left">1.1  Text control tags </h2>
    <p align="justify"> This is the first 1 Paragraphs .</p>
 </body>
 <!-- ********* End ********* -->
</html> 

The first 2 Turn off :html5- Setting of horizontal line and line feed

Task description
Our mission : Write a web page with a horizontal line below the title .

Related knowledge
In order to complete this mission , You need to master :1. Usage of horizontal line label and line feed label ,2. Properties related to horizontal line labels .

Horizontal label
Horizontal label hr/ It's a single label , Used to produce a horizontal line . You can set the thickness of the horizontal line 、 length 、 Alignment mode 、 Color attributes with or without shadows and lines .

Properties related to horizontal line labels
size: Thickness of horizontal line , A unit of length , The default is px
width: Horizontal line length , A unit of length , The default is px
align: Align horizontal lines , Take left、center、right
color: Horizontal line color , Its value can be color words , Or color code .
noshade: No shadow settings , Add without shadow , Shadow when not added .
Line wrap label

Line wrap label
It's a single label , You can wrap the text without ending the text content . It does not produce an empty line , But multiple in a row
Tags can produce the effect of multiple empty lines .

Programming requirements
In the editor on the right Begin - End Supplement code in the area , The specific requirement is :
1. At the first level, the title text “ Chapter one HTML5 Basics ” Add a horizontal line below , The property requirements of the horizontal line are as follows :
(1) Add... To the horizontal line label size attribute , The value is 3
(2) Add... To the horizontal line label width attribute , The value is 400
(3) Set the color of the horizontal line to blue
(4) Remove the shadow effect of horizontal lines
2. Add a blank line below the horizontal line with a newline label

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title> Setting of horizontal line </title>
 </head>
 <body background="https://www.educoder.net/api/attachments/2308369">
    <h1 align="center"> Chapter one  HTML5 Basics </h1>
    <!-- ********* Begin ********* -->
    <hr size="3" width="400" color="blue" nodeshade="noshade" align="center"/>
    <br/>
    <!-- ********* End ********* -->
    <h2 align="left">1.1  Text control tags </h2>
    <p align="justify"> This is the first 1 Paragraphs .</p>             
 </body>
</html> 

The first 3 Turn off :html5- Text modification

Task description
Our mission : Write a HTML file , And modify the text as required . The display effect is as follows :

Chapter one HTML5 Basics

1.1 Text control tags
This is bold text This is the text in italics This is underlined text X3-2Y2=1
Related knowledge
In order to complete this mission , You need to master :1.font Labels and their attributes ,2. The function of common text decoration labels .

font Labels and their attributes
font The label can adjust the font size of the text 、 Font and color . The corresponding attribute is :

size: Set text size , Its value is 1~7
face: Set text font
color: Set text color , Values are color words or color codes
align: Set text alignment , The value can be left、center、right、justify
Other tags of the text modifier class
Other labels of the text decoration class are shown in the figure below
Text modification

Programming requirements
According to the previous renderings , Two in the editor on the right Begin - End Supplement code in the area , The specific requirement is :
1. use font The label is the first level title text “ Chapter one HTML5 Basics ” add to “ In black ” Fonts and “ Red ” Show
2. Bold is adopted respectively 、 Italics 、 Underline 、 Superscript and subscript labels add a display effect to the corresponding text

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title> Setting of horizontal line </title>
 </head>
 <body background="https://www.educoder.net/api/attachments/2308369">
    <h1 align="center">
       <!-- ********* Begin ********* -->
        <font face=" In black " color="red"> Chapter one  HTML5 Basics </font>
       <!-- ********* End ********* -->
    </h1>
       <hr size=3 width=400 Align=center color=blue noshade/>
       <br/>    
    <h2 align="left">1.1  Text control tags </h2>
     <!-- ********* Begin ********* -->
       <b> This is bold text </b>
       <i> This is the text in italics </i>
       <u> This is underlined text </u>
       X<sup>3</sup>-2Y<sub>2</sub>=1     
     <!-- ********* End ********* -->
 </body>
 </html>  

copyright notice
author[is_ kevin_ cen],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120625191073.html

Random recommended