HTML

• The syntax of HTML
• Why semantic structure is so important for HTML
• How HTML documents are structured
• A tour of the main elements in HTML
• The semantic structure elements in HTML5

• HTML documents should only focus on the structure of the document
• HTML document should not describe how to visually present content but or meaning only describe its content’s structural semantics
• Information about how the content should look is left to CSS (Cascading Style Sheets).
• As a consequence, beginning HTML authors should create semantic HTML documents (such as: section, article, menu, etc.. Instead of div).

The <title> element plays an important role in search engine optimization (SEO), that is, improving a page’s rank (its position in the results page after a search) . While each search

title (and the major headings)

engine uses different algorithms for determining a page’s rank, the provides a key role in determining what a given page is about.

Google: A good title is unique to the page, clear and concise, and accurately describes the contents of

“

the page. For example, your title could include the name of your website or business, other bits of important information like the physical location of the business, and maybe some information about what the particular page has to offer for users”.

Also add a meta description tag, a good meta description tag must give a clear description to each page, it is used to generate the search result text:

Bad: <meta name="description" content="Sewing supplies, sewing machines, bobbins, needles"> Good: <meta name="description" content="Get everything you need to sew your next garment. Open Saturday-Thursday -5pm, located in Al Olaya District, Riyadh.">

• HTML provides six levels of heading (h1 through h6)
• They are an essential way for document authors to show their readers the structure of the document
• Headings are also used by the browser to create a document outline for the page.
• Choose the heading level because it is appropriate semantically NOT because of its default presentation (e.g., choosing <h3> because you want your text to be bold and 16pt). Source code: Example

When referencing a page or resource When referencing a resource that is on an external site, a full absolute on the same server, you can use URL reference is required

relative referencing.

• Full URL with a protocol (typically, • If the URL does not include the http:// or https://), the domain http:// ” then the browser will “ name, any paths, and the file request the current server for the name of the desired resource. file.

Example: chapter02/06_hyperlinks

Write html code to:

• link to some section of your page
• link to some external website
• make some image clickable

• What HTML tables are and how to create them
• What forms are and how they work
• What the different form controls are and how to use them
• How to improve the accessibility of your websites

Forms provide the user with an alternative way to interact with a web server.

• Up to now, clicking hyperlinks was the only mechanism available to the user
• Using a form, the user can enter text, choose items from lists, and click buttons
• Typically, programs running on the server will take the input from HTML forms and do something with it,
  • such as save it in a database,
  • interact with an external web service, or
  • customize subsequent HTML based on that input.
• HTML5 has added a number of new controls and more customization options

g2

Two important attributes that are essential features of any <form> are the action and the method attributes.

• The action attribute specifies the URL of the server-side resource that will process the form data.
• The method attribute specifies how the query string data will be transmitted from the browser to the server (GET, POST).
• Note: you can only use “GET” or “POST” in http forms. DELETE and UPDATE can be sent using JavaScript.

• Data can be clearly seen in the address bar. This may be an advantage during development but a disadvantage in production.
• Data remains in browser history and cache. Again this may be beneficial to some users, but it is a security risk on public computers.
• Data can be bookmarked (also an advantage and a disadvantage).
• There is a l imit on the number of characters in the returned form data. codes form [part B]\1_getmethod

Forms often need the user to select an option from a group of choices. HTML provides several ways to do this.

• Select Lists
• Radio Buttons
• Checkboxes

<input type="submit"> Creates a button that submits the form data to the server.

<input type="reset"> Creates a button that clears any of the user’s already entered form data.

<input type="button"> Creates a custom button. This button may require JavaScript for it to actually perform any action.

<input type="image"> Creates a custom submit button that uses an image for its display.

<button> Creates a custom button.

1. Input types [text, email, tel, password, search ...], textarea
2. select [multiple, selected, optgroup]
3. radiobutton [checked]
4. checkbox [checked]
5. button [submit, resect, type=button, button tag]
6. required

date Creates a general date input control. The format for the date is “

yyyy-mm- dd.”

time Creates a time input control. The format for the time is “HH:MM:SS,” for

hours:minutes:seconds.

datetime Creates a control in which the user can enter a date and time.

datetime-local Creates a control in which the user can enter a date and time without specifying a time zone.

month Creates a control in which the user can enter a month in a year. The format is “ mm.”

yyyy-

week Creates a control in which the user can specify a week in a year. The format is “ W##.”

yyyy-

• User input must never be trusted.
• It could be missing.
• It might be in the wrong format.
• It might even contain JavaScript or SQL as a means to causing some type of attack/hack.
• Thus, almost always user input must be tested for validity.

• Required information. Some data fields just cannot be left empty.
• Correct data type. Some fields such as numbers or dates, must follow the rules for its data type in order to be considered valid.
• Correct format. Some information, such as postal codes, credit card numbers, and social security numbers have to follow certain pattern rules.
• Comparison. Some user-entered fields are considered correct or not in relation to an already inputted value (password confirm, end date > start date, etc.)
• Range check.
• Custom.

• What is the problem? Users do not want to read lengthy messages to determine what needs to be changed.
• Where is the problem? Some type of error indication should be located near the field that generated the problem.
• If appropriate, how do I fix it? For instance, don’t just tell the user that a date is in the wrong format; tell him or her what format you are expecting

• Provide textual hints to the user on the form itself.
• Using tool tips or pop-overs to display context-sensitive help about the expected input (CSS or the title attribute)
• Another technique for helping the user understand the correct format for an input field is to provide a JavaScript-based mask (999)-999-9999
• Providing well chosen default values for text fields can reduce validation errors
• Finally, many user input errors can be eliminated by choosing a better data entry type than the standard <input type="text">.

There are many ways to describe color in web development.

• Color Names
• RGB (Red Green Blue)
• HSL (Hue-Saturation-Lightness)

END

• If Live server not automatically opening browser

Click go live and write http://IP:port e.g.: http://127.0.0.1:58208

• Lets try together a simple html code step by step on VS code.