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">
?
- Both
<button type="submit">
and<input type="submit">
display as buttons and cause the form data to be submitted to the server. - 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. - 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
HTML
- 768