HTML Basics

By Murari NayakTechnology
html javascript

When someone hits the url, the computer puts the information and some additional information and puts it in a packet and sends out to the servers and the data-centers to the internet hub. The internet hub lets the packet know where the server resides. Then the server returns what the user wants, and divides the information into multiple packets and are sent to the destination, where the packets are again reorganized to display the web page.

HTML is the noun of a web-page. structure content of a page
CSS is the adjectives/skin
JavaScript verbs/actions

15 HTML Basics
HyperText Markup Language

18 HTML Boiler plate

<!DOCTYPE html>.
<html>
 <head>
  <!-- General metadata of the document -->
  <title>Page Title on Tab</title><!-- This is the text that shows up in the google search titles -->
 </head>
 <body
 </body>
</html>

Block level elements and inline elements.
B strong
I em emphasis
On or ul
Div is a block level generic container.
Span is an inline generic container.
Attributes are ways to provide additional information to html elements.

Lecture 28
Before HTML5

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Murari</td>
    <td>27</td>
  </tr>
  <tr>
    <td>Mohan</td>
    <td>28</td>
  </tr>
</table>

HTML5
The thead and tbody were added to give more meaningful semantics

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Murari</td>
      <td>27</td>
    </tr>
    <tr>
      <td>Mohan</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

Lecture 31 HTML Forms

<input> type="" text/date/color/file/checkbox ...
<form action="/sign-in" method="post">
  <input name="username" type="text" placeholder="Username">
  <input type="password">
  <button>Login</button>
</form>

The name attribute in the input tag corresponds to the value that will be sent to the url request and would be attached as a query paramater to the request url.
www.apiurl.com/getmydata?username=somename
We use labels instead of <p> and <span> in the forms is because it will help screen readers which read out text from the label block.

<label>
  Username:
  <input type="text">
</label>

or can be written as: // the id of <input> corresponds to the for tag in <label>

<label for="username">Username: </label>
<input id="username" type="text">

For <input type=”radio”>, to group them to one selection, one needs to give all the related radio buttons, the same name attribute. The value tag is also required to make the form give a particular value for selection.

<label>Dog: <input type="radio" name="petChoice" value="dog"></label>
<label>Cat: <input type="radio" name="petChoice" value="cat"></label>

When submitting the form, the resulting url would be something like …?petChoice=cat

<select name="color">
  <option>Red</option>
  <option>Orange</option>
</select>

By default the value inside the <option> is passed to query, but sometimes it might be required to pass different values than what is shown to the user. In that case, the value attribute comes handy.

<option value="red">Red</option>
<textarea name="paragraph" rows="10" cols="100"></textarea>

Leave a Reply