1. Getting started with HTML
HTML (Hypertext Markup Language) is a simple Markup Language used to create Hypertext documents on the Web. It is based on the original text file, with a series of tags to describe its format, color, plus sound, animation, and even video, to form a wonderful picture. When a user browses information on WWW, the browser automatically interprets the meaning of these tags and displays these marked files on the screen in a certain format.
1. A simple example
Enter the following code in any Editor:
<Html>
<Head>
<Title> first webpage </title>
</Head>
<Body>
This is my first HTML file!
</Body>
</Html>
Save it as the first.htmlor first.htm file name. open the file in your browser and you will see the effect.
2. Basic HTML Format
Generally, the beginning and end of an HTML file are marked by The part between <Title> and </title> are used to name a webpage. It should reflect the content of the webpage and display it on the title bar of the browser.
The <body> and </body> are the subject content of the webpage.
Ii. hyperlink
There are two types of hyperlinks on a webpage: links on the same webpage and links between different webpages.
1. URL
URL (Uniform Resource Locator), which is a common URL.
2. Basic hyperlink format
The basic format of a hyperlink is as follows:
<A href = "link address or file"> highlighted text </a>
Starting with <a> As a hyperlink, href specifies the information of the link to be linked, and uses HTTP/FTP and other link methods.
On a webpage, the hyperlinks in text are usually blue, and there is an underline under the text. When the mouse pointer moves to the link, it will become a hand, click it to jump to the webpage indicated by this hyperlink.
3. links on the same webpage
First, set the hyperlink. its simple structure is as follows:
<A href = "# anchor name"> highlighted text </a>
Here, the anchor name refers to a specific location that can be linked to in a webpage.
Then, specify the specific anchor name by marking <a name>, that is:
<A name = "anchor name"> </a>
Click "highlight text" To Go To The <a name = "anchor name"> area below.
4. Links between different webpages
This is common. The format and usage are described in the previous section 2.
3. webpage Modification
In an HTML page, you can use various tags to modify the page.
1. Font mark
HTML provides a description of the font, such as its shape, size, and color.
Common shape labels include bold (<B> </B>), italic (<I> </I>), and underline (<u> </u>.
There are three methods to describe the character size:
(1) The size level is divided into six levels, namely, h1, h2, h3, h4, h5, and h6. Among them, h1 is the largest and h6 is the smallest. Generally, the first three types of fonts are larger than the text fonts, the last three types are smaller than the text font.
(2) absolute size, which is described in HTML with the <font> </font> tag size attribute. For example, size = 5 indicates the 5th font.
(3) Relative size. The size = "+ 3" indicates the size of the current font, And the size = "-2" indicates the size of the current font is 2 lower than the current font.
The font color attribute can be used to describe the Character color after font, for example:
<Font color = "Yellow" size = 5> indicates that the characters to be displayed are Yellow five characters
<Font color = "808080" size = "+ 3"> it indicates that the characters to be displayed are gray, which is a third digit from the current font.
The above example shows that the color can be expressed by English words and hexadecimal numbers.
2. Page tag
(1) Add comments
Format: <! -- Content to be commented out -->
(2) field mark
Format: <p>... </p>
(3) line feed mark
Format: <br>
(4) pre-formatted text mark
Format: <pre>... </pre>
(5) horizontal line
Format: (6) text alignment
Format: <center>... </center>, <left>... </left>, <right>... </right>
(7) background color or background pattern
Format: <body background = "image-URL" bgcolor = # text = # link = # alink = # vlink = #>
Among them, background (background pattern, image file name and positioning path), bgcolor (background color), text (color of non-link text), link (color of link text), alink (the color of the link text being clicked), vlink (the color of the link text that has been clicked), # (rrggbb, the color value is represented by hexadecimal red-green-blue RGB ).
(8) Multi-Window page tag
A Web page can be divided into several parts. Each part can display an HTML file independently to form multiple forms. The format is as follows:
<Frameset>... </frameset>
Multiple windows can be arranged vertically or horizontally or in a hybrid manner. The following example shows two rows and two columns of Windows:
<Html>
<Head>
<Title> multi-window page </title>
</Head>
<Frameset rows = 40%, 60%> // 40% of the first row and 60% of the second row
<Frameset cols = 40%, 60%> // the window in the first row is divided into two columns, with 40% on the left and 60% on the right.
<Frame src = "file1.html">
<Frame src = "file2.html">
</Frameset>
<Frameset cols = 30%, 70%>
<Frame src = "file3.html">
<Framesrc = "file4.html">
</Frameset>
</Frameset>
</Html>
4. multimedia pages
1. Image tagging
Format:
Attribute:
Src: image URL
Alt: Text displayed at the image position when the browser has not fully read the image
Width: The image width.
Height: The image height.
Align: align alignment of images and text, including left, middle, right, top, and botton
Border: Image border thickness
Hspace: horizontal null margin
Vspace: vertical null margin
For example, insert a left-to-right xxx.gif image and click the image to export it to yyy.html, as shown below:
<A href = "yyy.html"> </a>
2. Background Music
Format: <bgsound>
Attribute:
Src: URL of the WAV file
Loop: Number of loops
Example:
<Bgsound src = "music.wav" loop = "-1">
Set the loop attribute to-1, which means that the audio is played cyclically.
3. Insert a video
Format:
Use the url.avifile to upload the video and url.gif as the album art of the video. That is, when the browser has not fully read the AVI file, the image is displayed in the AVI playback area.
V. tables and forms
1. List
There are three types of lists in HTML: unordered list, ordered list, and definition list.
Unordered list is defined by <ul> in the following format:
<Ul>
<Li>
<Li>
<Li>
</Ul>
The ul mark carries the type attribute, and the list item li can also contain the type attribute. The type attribute can be circle (hollow circle), disk (wide circle), and square (square ).
The ordered list is defined by <ol>. The format is the same as that of the unordered list, but ol has two attributes: type and start. The type attribute can be A (uppercase letter number) a (lower-case letter number), l (Arabic digit number), I (upper-case Rome letter number), I (lower-case Rome letter number), start attribute and <ol> mark, specifies the start number of the first item in the list. The default start number is "1".
Define the list tag as <dl>. Use <dt> to show the title and <dd> to describe the content defined by the title.
2. Table
The basic format of an HTML table is:
<Table>
<Caption> table title </caption>
<Tr>
<Th> header 1... <th> header n
<Tr>
<Td> table Item 1... <td> table item n
...
</Table>
<Table> and </table> define a table. All the content in the table is between the two labels. The <table> label can contain a frame (border attribute control), rules (control the separation line between cells), border (set the border width, in pixels), and define the table title between <caption> and </caption>, <tr> defines the table rows. In each row of the table, <th> and <td> define the table cells. Generally, <th> defines the table header entry, <td> define the table content.
3. Form
The basic format of Form tag is:
<Form method = "get | post" action = "uri" enctype = "type">
...
</Form>
In the form token, method indicates the method in which the input data is sent to the server (get indicates that the data is added to the uri address set by the action and sent to the server, get indicates that the input data is transmitted to the server through HTTP post transmission.) action specifies the Program executed by the server.
(1) Input Form
The input form tag <input> is an independent tag. common attributes are as follows:
Name: Specifies the Form Control name.
Value: used to specify the initial value of the control.
Size: used to specify the initial width of the control. The attribute value is usually pixel. When the type attribute is text or password, it is the number of characters.
Maxlength: specifies the maximum number of texts that a user can enter. When the length exceeds the size, the browser will allow data scrolling.
Checked: Boolean attribute, used to specify whether the box is selected
Src = uri: When type = "image", it is used to specify the position of the image used to modify the graphic submit button.
Type: the value and meaning of the attribute are button, checkbox, textarea, text, and password), hidden (hidden button), submit (submit server), image (image transfer server), reset (clear re-input), radio (single choice button)
(2) Create button
<Button> you can create three buttons for the tag: Submit, reset, and normal. The syntax is as follows:
<Button name = "" value = "" type = submit | button | reset>
...
</Button>
The name attribute specifies the control name, the value Attribute specifies the initial value of the control, and the type attribute specifies the type of the create button (when it is submit, it indicates creating a submit button; when it is a button, creates a normal button. When a reset is used, a reset button is created ).
(3) create option menu
Insert the <select> tag between the <form> tag and mark each independent option with <option>. The options menu is displayed. The syntax is as follows:
<Select>
<Option>
...
<Option>
</Select>
The common attributes of the select tag are as follows:
Name: Specifies the control name.
Size: specifies the number of rows displayed in the option menu at a time.
Multiple: If this attribute is available, you can select multiple options. Otherwise, only one option is allowed.
The option tag has the following common attributes:
Selected: used to indicate that the current option is pre-selected
Value: used to specify the initial value of the control.
Lable = text: specify a label for the option
The following is an example of form design. The Code is as follows:
<Html>
<Head>
<Title> html form demo </title>
</Head>
<Body>
<Form method = "get" action = "form.html">
Enter your address
<Input type = "text" size = 10 name = "name1"> <br>
Educational Level
<Select name = "list1">
<Option> PhD
<Option> master
<Option> University
<Option> Junior College
<Option> Technical Secondary School
<Option> others
</Select>
<Br>
Books you want
Language <input type = "checkbox" name = "book" value = "yea" checked>
Mathematics <input type = "checkbox" name = "book" value = "yea">
English <input type = "checkbox" name = "book" value = "yea">
Physical <input type = "checkbox" name = "book" value = "yea">
Chemistry <input type = "checkbox" name = "book" value = "yea">
Politics <input type = "checkbox" name = "book" value = "yea">
<Input type = "submit" value = "submit">
</Form>
</Body>
</Html>
The effect of running the file in a browser is shown in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
