Full Stack Course

1. Forms

Name:

Message:
Note: don't break line before </textarea>. Some browsers may send non-empty value when there is no value.

Password Note: this doesn't apply any encryption when the data is actually sent, so don't rely on a password field to actually secure the data.

T-shirt color:

Membership: Basic Standard Premium Note: if user didn't select one of the options, nothing will be sent to the server.

Likes: Running Cycling Swimming

About `method` attribute of form

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data.

Appends form-data into the URL in name/value pairs
The length of a URL is limited (2048 characters)
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user wants to bookmark the result
GET is better for non-secure data, like query strings in Google
GET is a default method

POST

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked

To send a file use `enctype="multipart/form-data` attribute

`input type="hidden"`

is used for sending IDs like product ID that was choosen by user.
Example: input type="hidden" name="product_id" id="product_id" value="789"
Do not use hidden inputs as a form of security! The value is not visible to regular user only.

2. Meta Tags

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page.

head>
<meta> name="" content="" </meta>
</head>

Examples:

<meta charset="UTF-8">
In UTF-8 each character (number, sign, letter in each language) has its specific code. As a result web page that contains more than one language will be shown correctly.
<meta name="description" content="Description of the web page">
Provides a brief summary of a web page. Search engines such as Google often display the meta description—typically up to 160 characters long—in search results where they can highly influence user click-through rates.
<meta name="keywords" content="Electronics shop, TV, Refrigerator, Washing machines ">
This meta keywords element was visible to search engines. Today people continue to use this tag in their web sites without proven reason.
<meta http-equiv=”refresh” content="30">
Refresh document every 30 seconds

3. iframe

iframe - an inline frame is used to embed another document within the current HTML document.

External Web Site:

Video from YouTube:

Open some video on the the YouTube, press on Share --> Embed, than copy iframe section.

<iframe src="URL"></iframe>

Attributes:

height
width
frameborder

4. Introduction to CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

Inline CSS
This is a bad practice.
Example: <p style="color:red">Inline CSS is not recommended.</p>
Internal CSS
Style is specified inside the html file. Better than Inline CSS.

<head>
   <style>
     ...
   </style>
</head>
External CSS.
Style is specified in the external file like style.css This is the preffered option. Browser may cache external css file.

<head>
<link rel="stylesheet" href="style.css">
</head>

The latest property specified in external css file will define the style. Inline CSS has the highest priority.

Example:
div {
   color: red;
   font-size: 25px;
   font-family: Arial, Helvetica, sans-serif;
}

Welcome to Full Stack Course | Lesson 4