HTML

The Main Rule

<tagname> some content </tagname>

A Resource You Will Love 😍

Every document we have should follow the pattern below:

<!DOCTYPE html>
<html>
    <head>
        <!-- our metadata goes here -->
        <title></title>
    </head>
    <body>
        <!-- our content goes here -->
    </body>
</html>

Comments:

<!-- This is a comment. it dosn't do anything! -->

Common Tags:

  • <h1> - <h6>
  • <p>
  • <b> and <strong>
  • <em>
  • <ul> - <ol> - <li>

Your First Fight 🔫

Attributes

Adding Additonal Informaton To Tags

<tagname property="value"></tagname>

Images

<img src="tony.jpj">

Links

<a href="url">Link Text</a>
<a href="http://marvel.com">Marvel Website</a>
.

Time To Challenge 👩🏻‍🔬

Tables

Name Release Date
Back in Black July 25, 1980
Highway to Hell July 27, 1979
High Voltage
April 30, 1976

<thead>

<tbody>

<tr>

<th>

<tr>

<td>

I KNOW 🤯

Get your hands dirty with code 👩🏻‍💻

HTML Forms

Text

Dropdown

Radio

Submit Button

Password

<form>

<form action="" method="">
    <!-- all inputs goes here -->
</form>

represents a document section that contains interactive controls for submitting information to a web server.

⚠️

We'll cover "action" and "method" attribute later on the course

<input>

<input type="text">

<input type="password">

<input type="email">

<input type="checkbox">

used to create interactive controls for web-based forms in order to accept data from the user.

the "type" attribute determines the type of input

Let me create simple login Form

<h1>Login 🔑</h1>

<form>
  <input type="email" />
  <input type="password" />
  <button>Login</button>
</form>

2 ways to submit our Forms

<form>
  <!-- blah blah blah -->
  <button>Login</button>
</form>
<form>
  <!-- blah blah blah -->
  <input type="submit" value="Login">
</form>

Difference between <button type="submit"> and <input type="submit">?

  1. Both <button type="submit"> and <input type="submit"> display as buttons and cause the form data to be submitted to the server.
  2. The difference is that <button> can have content, whereas <input> cannot (it is a null element). While the button-text of an <input> can be specified, you cannot add markup to the text or insert a picture. So <button> has a wider array of display options.
  3. There are some problems with <button> on older, non-standard browsers (such as Internet Explorer 6), but the vast majority of users today will not encounter them.

Label Tag

<h1>Login 🔑</h1>

<form>
  <label for="username">username: </label>
  <input type="text" id="username" />
  
  <label for="password">password: </label>
  <input type="password" id="password">
  <button>Login</button>
</form>

Placeholder Attribute

<form>
    <span>🔎</span>
    <input type="text" placeholder="search for music...">
    <button type="submit">Search</button>
</form>

😳

Ali, wait... WTF is span tag?

Don't worry guys 😎 we'll cover it later,

but for now remember that span is an inline-level element.

Radio Button

<form>
  <input type="radio" name="gender" id="male" value="male" />
  <label for="male">male</label>
  <br />
  <input type="radio" name="gender" id="female" value="female" />
  <label for="female">female</label>
  <br />
  <input type="radio" name="gender" id="other" value="other" />
  <label for="other">other</label>
</form>

value is literally what the value of an <input> element is. 

To combine more than one radio buttons together.

✅ in fact: gender=female

Select Tag

<lable>

<select>

<img />

<option>

<label for="singer">Who sang this music album?</label>
<select name="singer" id="singer">
  <option value="">--Please choose an option--</option>
  <option value="arthur">James Arthur</option>
  <option value="sheeran">Ed Sheeran</option>
  <option value="smith">Sam Smith</option>
</select>

singer=sheeran

Checkbox

<form>
  <input type="checkbox" name="terms" id="terms" />
  <label for="terms">I agree to <a href="#">terms</a></label>
  <br />
  <input type="checkbox" name="newsletter" id="newsletter" />
  <label for="newsletter">I agree to subscribe email newsletter</label>
    <button>Submit</button>
</form>


terms

= true

Textarea

represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

<input type="text" />

<input type="email" />

<input type="url" />

<input type="checkbox" />

<input type="submit" /> or <button></button>

<form>

😤

Damn, say this.

Ladies and gentlemen, This is:

<textarea></textarea>

😎

HTML

By Ali Montajebi