---
# System prepended metadata

title: Day1

---

# Day1

## Programming 
> Programming is a way to “instruct the computer to perform various tasks”.

![](https://i.imgur.com/XChvhVS.png)


---
## Buliding a website 

**What tools do you need to create a website?**
1. A web browser 

    ![](https://i.imgur.com/dsnz7lb.jpg)


2. Code editor for html css javascribt examble vscode atom
  
    ![](https://i.imgur.com/5ewUvlP.jpg)



---

**website are mostly built using three languages?**
 
1. html
2. css
3. javascribt
![](https://i.imgur.com/lsv4trp.jpg)

---
## HTML
![](https://i.imgur.com/lKudR95.png)

* HTML is the standard markup language for Web pages.

* With HTML you can create your own Website.*
* HTML describes the structure of a Web page
 

---


### Basic structure of an HTML document: 
  
 ````html=
 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>

````
*  The ```<!DOCTYPE html>``` declaration defines that this document is an HTML5 document

*  The ```<html>``` element is the root element of an HTML page

* The ```<head>``` element contains meta information about the HTML page

* The ```<title>``` element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

* The ```<body>``` element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.



---

#### HTML Element

* An HTML element is defined by a start tag, some content, and an end tag:

```<tagname>Content goes here...</tagname>```

*Example*
- ``<h1>My First Heading</h1>``
- ``<p>My first paragraph.</p>``
 

---

**Basic structure of an HTML**

![](https://i.imgur.com/h23DpL1.png)


---

### HTML Headings or subtitles

*HTML headings are titles or subtitles that you want to display on a webpage.*

```html=
<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 


---


### HTML Paragraphs

*A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.*

 ```html=
 <!DOCTYPE html>
<html>
<body>

<p>This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.</p>
</body>
</html>

 ```
<p>This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.</p>


---


### HTML Text Formatting

* HTML contains several elements for defining text with a special meaning.

Formatting elements were designed to display special types of text:

``` html:
<b> - Bold text 
<strong> - Important text 
<i> - Italic text 
<mark> - Marked text 
<small> - Smaller text  
<del> - Deleted text
```

 
**HOW**  
 
``` html=
<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>
<p><strong>This text is important!</strong></p>
<p><i>This text is italic.</i></p>
<p><small>This is some smaller text.</small></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>
```
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is important!</strong></p>
<p><i>This text is italic.</i></p>
<p><small>This is some smaller text.</small></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>

---


### HTML Attributes
  
* All HTML elements can have attributes
* Attributes provide additional information about elements
* Attributes are always specified in the start tag
* Attributes usually come in name/value pairs like: name="value"

1. **The href Attribute**
 
*The ```<a>``` tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:*

```<a></a>```

*The target attribute specifies where to open the linked document.*

**HOW**
```<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>```

Example:

``` html=
<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>

</body>
</html>
```
<a href="https://www.w3schools.com">Visit W3Schools</a>


2. **The src Attribute**
*The ```<img>``` tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:*

- **the Image have a single tag**
  ```<img>```

**HOW**
```<img src="img_girl.jpg">```

Example:

``` html=
<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>

<img src="img_girl.jpg" width="500" height="600" alt="Japanese girl">

</body>
</html>

```


---

<img src="http://pm1.narvii.com/6940/e51b16adec9b299e5ed091425f48b91e812a3b2dr1-600-583v2_00.jpg">


---


# assignment:
