246 lines
4.3 KiB
Markdown
246 lines
4.3 KiB
Markdown
status: #doc
|
||
Tags: #html
|
||
links: [[html-css]]
|
||
Date: 2023-07-28
|
||
___
|
||
# HTML
|
||
|
||
## general knowledge
|
||
|
||
|
||
### tag types
|
||
|
||
html describe content of the page with tags
|
||
we have 2 type of tags
|
||
1- normal tag :
|
||
have opening and closing tag that we must use
|
||
```html
|
||
<opening> content </closing>
|
||
```
|
||
2- self closing tag
|
||
this tags are self closing and don not need closing tag can be used in 2 way
|
||
```html
|
||
<input> or <input />
|
||
```
|
||
### tag nesting
|
||
|
||
you can nest tags like this
|
||
|
||
```html
|
||
<div>
|
||
<h1> the title of my grand site </h1>
|
||
</div>
|
||
```
|
||
|
||
|
||
|
||
## Tags
|
||
|
||
### h tags
|
||
|
||
show titles of web page and order of them as number go up its importance go down or its in lower position in hierarchy there is `h1` to `h6`
|
||
```html
|
||
<h1>This is title of my doc</h1>
|
||
```
|
||
|
||
### p tag
|
||
|
||
use for paragraph of text for grouping some text like in novels
|
||
```html
|
||
<p>lorm ipson kill the piston </p>
|
||
```
|
||
|
||
### a tag
|
||
|
||
for linking to another page or to somewhere else in our page we use anchor `a` tag it show test that is inside and when clicked it go to its address
|
||
|
||
```html
|
||
<a href="google.com">google</a>
|
||
```
|
||
|
||
#### a tag attributes
|
||
|
||
- href : for pointing to where we want to go
|
||
```html
|
||
<a href="google.com"></a>
|
||
```
|
||
|
||
- target : where open this link
|
||
use "_blank" for opening in new tab
|
||
```html
|
||
<a target="_blank"></a>
|
||
```
|
||
|
||
### div tag
|
||
|
||
short for division . it is generic container tag for grouping "like" things together don't do any thing by it self
|
||
```html
|
||
<div></div>
|
||
```
|
||
|
||
### lists
|
||
|
||
#### list items
|
||
|
||
```html
|
||
<li>first</li>
|
||
<li>second</li>
|
||
```
|
||
result:
|
||
<li>first</li>
|
||
<li>second</li>
|
||
#### ordered list
|
||
```html
|
||
<ol>
|
||
|
||
<li>first</li>
|
||
<li>second</li>
|
||
|
||
</ol>
|
||
```
|
||
result:
|
||
<ol>
|
||
|
||
<li>first</li>
|
||
<li>second</li>
|
||
|
||
</ol>
|
||
#### unordered list
|
||
|
||
```html
|
||
<ul>
|
||
|
||
<li>first</li>
|
||
<li>second</li>
|
||
|
||
</ul>
|
||
```
|
||
|
||
result:
|
||
<ul>
|
||
|
||
<li>first</li>
|
||
<li>second</li>
|
||
|
||
</ul>
|
||
|
||
### [[Web dev/html-css/button|button]]
|
||
|
||
### img
|
||
|
||
image tag src attribute and optional alt tag for accessibility and google indexing
|
||
```html
|
||
<img
|
||
src="http://pets-images.dev-apis.com/pets/dog25.jpg"
|
||
alt="an adorable puppy"
|
||
/>
|
||
```
|
||
result:
|
||
![[Pasted image 20231227110841.jpg|300]]
|
||
|
||
### input
|
||
Browser inputs. Sometimes you need to gather input from the user
|
||
|
||
```html
|
||
<input type="text" />
|
||
<input type="color" />
|
||
<input type="file" />
|
||
<input type="number" />
|
||
<input type="datetime-local" />
|
||
<input type="radio" />
|
||
<input type="checkbox" />
|
||
```
|
||
|
||
result:
|
||
<input type="text" />
|
||
<input type="color" />
|
||
<input type="file" />
|
||
<input type="number" />
|
||
<input type="datetime-local" />
|
||
<input type="radio" />
|
||
<input type="checkbox" />
|
||
|
||
### textarea
|
||
|
||
Similar to an input but for a lot more text. You'd type long-form responses in here that could linebreaks in it
|
||
|
||
```html
|
||
<textarea></textarea>
|
||
```
|
||
|
||
result:
|
||
<textarea></textarea>
|
||
|
||
### select and option
|
||
|
||
Sometimes you want to limit a user to a certain group of options to select from. What country you're from, what month you were born in, etc.
|
||
|
||
```html
|
||
<select>
|
||
<option value="seattle">Seattle</option>
|
||
<option value="portland">Portland</option>
|
||
<option value="san-francisco">San Francisco</option>
|
||
</select>
|
||
```
|
||
|
||
<select>
|
||
<option value="seattle">Seattle</option>
|
||
<option value="portland">Portland</option>
|
||
<option value="san-francisco">San Francisco</option>
|
||
</select>
|
||
|
||
### <a href="https://www.w3schools.com/html/html_tables.asp"> tables</a>
|
||
|
||
Like making a table in Word or Excel. If you have a table of data, this is the best way to display it
|
||
|
||
### Comments
|
||
|
||
We, as coders, forget what things do. We write things that are really complicated or we know will be difficult to figure out later. Something to keep in mind is that you are mostly writing code for yourself to read later, not for the computer. Be careful of going overboard because comments like `<h1>Title of the Article</h1><!-- the title -->` aren't useful because it's pretty obvious that's the title
|
||
```html
|
||
<!-- your comments go here -->
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## HTML Attribute
|
||
|
||
attribute modify how elements in html work
|
||
we also need space between tag name and attribute and for giving attribute value we do it like this
|
||
``` html
|
||
<tagname attribute_name = "value" ></tagname>`
|
||
```
|
||
|
||
|
||
## quacks in html
|
||
|
||
- spaces between elements and extra space inside tag string are ignored
|
||
|
||
example : this two are same
|
||
|
||
```html
|
||
<p>test test 1234<p>
|
||
```
|
||
|
||
```html
|
||
<p>
|
||
|
||
test test
|
||
1234
|
||
</p>
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
# References
|
||
|
||
|
||
|