I will explain the basics of HTML as a prerequisite for creating a web application in Perl. 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. The screen layout and colors will be explained when explaining 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 as they are in HTML. 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 a line break 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. The feature of the inline element is that it flows to the left without a line break until it reaches 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 less 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 less than h2. h3 is a block element.
Heading 4 h4
<h4>Heading 4</h4>
It's a headline. It is displayed less than h3. h4 is a block element.
Heading 5 h5
<h5>Heading 5</h5>
It's a headline. It is displayed less than h4. h5 is a block element.
Heading 6 h6
<h6>Heading 6</h6>
It's a headline. It is displayed less 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.
Horizon hr
<hr>
Use the hr tag to draw a horizontal line. hr is a block element.
Hyperlink a
<a href="/other.html">Hyperlink</a>
It is 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 it for words you want to emphasize on the page. strong is an inline element.
Image img
<img border = "0" src="/images/img001.gif" width = "128" height = "128" alt = "description"></pre>
Use the img tag to display the image. Border is 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.
<h4>Formatted text pre</h4>
<pre>
use strict;
use warnings;
print "Hello World!";
If you want to write formatted text, use the pre tag. Note that a line break, spaces, etc. are displayed as they are, but "<" and">" are interpreted as special characters and must be replaced with "& lt;" and "& gt;".
To create a table, use the above tags in combination. 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 a specification of 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 break a line. In general, bIt is said that it is better to use div or p to start a new line than to use r.
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 = "submit"></div>
</form>
To submit a form, you need to describe the elements of the form such as 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 post is generally used when submitting from a form.
Text box & lt; input type = "text">
<input type = "text" name = "age"></pre>
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 sent data. The input tag is an inline element.
You can specify the following attributes:
<ul>
<li>
value - value
</li>
<li>
size - horizontal size
</li>
<li>
maxlength - maximum number of characters
</li>
</ul>
<h4>Password input box & lt; input type = "password"></h4>
<pre>
<input type = "password" name = "pass"></pre>
This is a password entry box. Specify a name in name.
The following attributes can be specified.
<ul>
<li>
value - value
</li>
<li>
size - horizontal size
</li>
<li>
maxlength - maximum number of characters
</li>
</ul>
<h4>Button & lt; input type = "button"></h4>
<pre>
<input type = "button" value = "press" name = "send"></pre>
It is a button. Specify "button" for the type of input tag. Let's specify the name because it will be used to identify the button. value will be the text displayed on the button.
<h4>Submit button & lt; input type = "submit"></h4>
<pre>
<input type = "submit" value = "submit"></pre>
This is the send 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:
<ul>
<li>
name - name
</li>
</ul>
<h4>Reset button & lt; input type = "reset"></h4>
<pre>
<input type = "reset" value = "reset"></pre>
It is a 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:
<ul>
<li>
name - name
</li>
</ul>
<h4>Image button & lt; input type = "image"></h4>
<pre>
<input type = "image" src="/image/dog.png" alt = "dog"></pre>
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:
<ul>
<li>
name - name
</li>
</ul>
<h4>Radio button & lt; input type = "radio"></h4>
<pre>
<input type = "radio" name = "animal" value = "dog" checked = "checked"><input type = "radio" name = "animal" value = "cat"></pre>
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.
<h4>Hidden field & lt; input type = "hidden"></h4>
<pre>
<input type = "hidden" name = "title" value = "Perl"></pre>
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.
<h4>checkbox & lt; input type = "checkbox"></h4>
<pre>
<input type = "checkbox" name = "animal" value = "dog" checked = "checked"><input type = "checkbox" name = "animal" value = "cat"></pre>
Check boxes 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.
<h4>File upload & lt; input type = "file"></h4>
<pre>
<input type = "file" name = "datafile"></pre>
It is used when you want to upload a file. Specify a name in name. This is not a file name, it is just a name to identify.
The following attributes can be specified.
<ul>
<li>
size - horizontal size
</li>
</ul>
Note that when uploading a file, you must specify "multipart/form-data" for the enctype of the form tag.
<pre>
<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 items to be displayed in the text part of the option tag.
If size is specified to be greater 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.
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"></pre>
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.
<h4>CSS (style sheet) description</h4>
<pre>
<style type = "text/css">/ * <! [CDATA [*/
/ * CSS description */
/ *]]> */</style>
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 of XHTML. On the contrary, from the perspective 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 of XHTML. On the contrary, from the viewpoint of JavaScript, the CDATA section is not needed, so it is commented out with //.
Loading external JavaScript
<script src="/js/myapi.js" type = "text/javascript"></script>
Use the script tag to load external JavaScript. Specify the URL of the JavaScript source in src, and specify "text/javascript" in type.
At the end
It was a rush, but I will finish the explanation of HTML.
Perl ABC