I will explain the basics of HTML as prerequisite knowledge for creating a website. With this much knowledge, I aimed for something that would allow me to write HTML freely. I will mainly explain the role of tags. Explains normal tags, form tags, tags used in the header part, etc. It also touches on how to handle Japanese and how to use CSS and JavaScript. I will explain the layout and colors of the screen when I explain CSS.
In HTML, documents are described using tags surrounded by "<" and ">". HTML documents start with "" and end with "". Write meta information such as the title of the HTML document between "
" and "". Describe the content of the document displayed on the screen between "" and "
".
Remember that is called a document type and is written at the beginning for the time being.
Character reference
Characters such as "<" and ">" cannot be used in HTML as they are. You can write these characters using a method called character reference.
& amp; quot;
"
& amp; amp;
&
& amp; lt;
<
& amp; gt;
>
& amp; nbsp;
space
In HTML, no matter how many spaces you write, they will be truncated to one space, so use "& nbsp;".
Tags used in the body part
Comments
<!-Comment-></pre>
Comments are from "<!-" To "->".
<h4> Block element div </h4>
<pre>
<div> something </div>
Describe the block element. The characteristics of block elements are that line breaks occur before and after, and that they have width and height. By default, the area is expanded to fill the left and right sides of the screen. You can also use CSS to control the position of the characters inside.
Describe the inline element. A feature of inline elements is that they are packed to the left without line breaks until they reach the right edge of the screen.
It's a headline. You can use the tags freely, but they are generally used to describe the title of the page. It will be displayed larger. h1 is a block element.
Heading 2 h2
<h2> Heading 2 </h2>
It's a headline. It is displayed smaller than h1. Generally, it is used as a title when there is an individual article. h2 is a block element.
Heading 3 h3
<h3> Heading 3 </h3>
It's a headline. It is displayed smaller than h2. h3 is a block element.
Heading 4 h4
<h4> Heading 4 </h4>
It's a headline. It is displayed smaller than h3. h4 is a block element.
Heading 5 h5
<h5> Heading 5 </h5>
It's a headline. It is displayed smaller than h4. h5 is a block element.
Heading 6 h6
<h6> Heading 6 </h6>
It's a headline. It is displayed smaller than h5. h6 is a block element.
Paragraph p
<p> Paragraph </p>
Use the p tag to create a paragraph. p is a block element.
Suiheisen hr
<hr>
Use the hr tag to draw a horizon. hr is a block element.
Hyperlink a
<a href="/other.html"> Hyperlink</a>
It's a hyperlink. Specify the linked document in href. a is an inline element.
If you click it, you will be taken to the hyperlinked page on the same screen. If you want to open the link on a new screen, specify "_blank" for target.
Use the img tag to display the image. Borders are added by default, so specify 0 for border. Specify a link to the image in scr. Specify the width of the image in width and the height of the image in height. Describe the description of the image in alt. img is an inline element.
Formatted text pre
use strict;
use warnings;
print "Hello World!";
If you want to write formatted text, use the pre tag. Note that line breaks, spaces, etc. are displayed as they are, but "<" and ">" are interpreted as special characters and must be replaced with "& lt;" and "& gt;".
Use the above tags in combination to create a table. The table tag is on the outermost side. Column headers are described using the th tag. Columns are described using the tr tag. Each row in the column is described using the td tag.
The border of the table tag is the thickness of the border. celspacing is the width between td. Set border to 1 and cellspacing to 0 for a typical looking table.
Bold b
<b> Bold </b>
Use the b tag to make the text bold. b is an inline element.
Line break br
<br>
Use the br tag to start a new line. In general, it's better to use divs and ps to break lines than to use br.
Use the above tags to create an unordered list. Arrange the li tags inside the ul tags. There is no order as shown below.
・ Item 1
・ Item 2
・ Item 3
Tags used in forms
form form
<form action = "/ register" method = "post">
<div> Year: <input type = "text" name = "age"> </div>
<div> <input type = "submit"value = "send"> </div>
</form>
In order to submit a form, it is necessary to describe the elements of the form such as the input tag inside the form tag. For action, specify the URL to which the data will be sent. HTTP method is specified for method, but it is common to use post when submitting from a form.
Text box & lt; input type = "text">
<input type = "text" name = "age">
The text box is a one-line text entry area. Specify "text" for type. Be sure to specify the name because it will be the name of the transmitted data. The input tag is an inline element.
You can specify the following attributes:
value --value
size --horizontal size
maxlength --maximum number of characters
Password input box & lt; input type = "password">
<input type = "password" name = "pass">
Password input box. Specify a name in name.
The following attributes can be specified.
value --value
size --horizontal size
maxlength --maximum number of characters
button & lt; input type = "button">
<input type = "button" value = "press" name = "send">
It's a button. Specify "button" for the type of input tag. Let's specify the name because it will be used when identifying the button. value is the text displayed on the button.
Submit button & lt; input type = "submit">
<input type = "submit" value = "submit">
This is the submit button. It is used to submit the value of the form. value will be the text displayed on the submit button.
You can specify the following attributes:
name --name
Reset button & lt; input type = "reset">
<input type = "reset" value = "reset">
This is the reset button. It is used to reset the value of the form. value will be the text displayed on the reset button.
You can specify the following attributes:
name --name
Image button & lt; input type = "image">
<input type = "image" src = "/ image / dog.png" alt = "dog">
It is an image button. src will be the URL of the image. alt is a description of the image.
You can specify the following attributes:
name --name
Radio button & lt; input type = "radio">
<input type = "radio" name = "animal" value = "dog" checked = "checked">
<input type = "radio" name = "animal" value = "cat">
Radio buttons are used to have one selected from multiple items. Specify a name in name. Those belonging to the same group should have the same name. Specify a value for value. If checked is set to "checked", that item will be selected.
Hidden field & lt; input type = "hidden">
<input type = "hidden" name = "title" value = "Perl">
It is an invisible field. It is used when there is a value that you want to send without showing it to the user on the browser. For name, specify the name. Specify a value for value.
checkbox & lt; input type = "checkbox">
<input type = "checkbox" name = "animal" value = "dog" checked = "checked">
<input type = "checkbox" name = "animal" value = "cat">
Checkboxes are used to have multiple items selected. For name, specify the name. Those belonging to the same group should have the same name. Specify a value for value. If checked is set to "checked", that item will be selected.
File upload & lt; input type = "file">
<input type = "file" name = "datafile">
Use this when you want to upload a file. Specify a name in name. This is not a file name, but just an identification name.
The following attributes can be specified.
size --horizontal size
Note that when uploading a file, you must specify "multipart / form-data" for the enctype of the form tag.
<form action = "cgi-bin / abc.cgi" method = "post" enctype = "multipart / form-data">
<input type = "file" name = "datafile">
<input type = "submit" value = "submit">
</form>
Pull-down menu or list box select
<select name = "animal">
<option value = "dog"> dog </option>
<option value = "cat"> cat </option>
</select> <
You can create a pull-down menu using the select tag. Specify a name in name. The option tag is the element to select. Specify a value for value. Describe the displayed item in the text part of the option tag.
If size is specified to be larger than 1, it becomes a list box.
<select name = "animal" size = "4">
<option value = "1"> cat </option>
<option value = "2"> dog </option>
<option value = "3"> Turtle </option>
<option value = "4"> Lion </option>
</select> <
Please also refer to the following explanation for the select element.
Use the meta tag to specify the character code to be used in HTML. When using the meta tag, specify "Content-Type" for http-equiv and "text / html; charset = UTF-8" for content. If you do not specify this, the characters may be garbled in the browser.
Therefore, please describe at the beginning of the head tag. If you use the http-equiv attribute, the browser will use the http-equiv information if there is no Content-Type in the HTTP response header.
Use the style tag to write CSS. Specify "text / css" for type. It seems that the CSS code needs to be written in a section called CDATA so that it works properly even with the specification called XHTML. On the contrary, from the viewpoint of CSS, the CDATA section is not needed, so it is commented out with / * * /.
Loading external CSS (style sheet)
<link href = "/ css / common.css" media = "screen" rel = "stylesheet" type = "text / css" />
Use the link tag to load external CSS. Specify "screen" for media. This is to specify that it is CSS for computer screens. Specify "stylesheet" for rel. This shows the external stylesheet definition file. Specify "text / css" for type.
Use the script tag to write JavaScript. Specify "text / javascript" for type. It seems that the JavaScript code needs to be written in a section called CDATA so that it works properly even with the specification called XHTML. On the contrary, from the viewpoint of JavaScript, the CDATA section is not needed, so it is commented out with //.
