<style>
.reveal {
font-size: 20px;
}
.reveal div.para {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
img[alt=drawing] { width: 200px; }
</style>
# COMP1010
## 5 Web Application Development
### 5.1 HTML
---
## What is HTML?
* HyperText Markup Language (HTML) describes the structure of web pages.
* Interpretted by your web browser (eg Chrome, Firefox, Safari)
* Explains **what** to show and **how** to show it.
---
## How Do We Create and View an HTML file?
* To create/save it: it needs to end in `.html`
* To edit it: open it in a text editor. We will be using VSCode.
* To open it: double-click on the file in your file system and it should open in a web browser.
---
## What Does HTML Look Like?
* HTML has a lot of tags.
* `<>` opens
* `</>` closes
* Self-closing tags open and close in one go. (Such as `input`, `br`, and some others.)
* Some tags have **attributes**
* Some tags have **children**
(More on those last three later.)
---
## What Does HTML Look Like?
* Label the tag which:
* Defines the type of document as an html document.
* The tag which opens (starts) the html.
* The tag which closes (ends) the html.
* The tag which opens the paragraph.
* The tag which closes the paragraph.
```{html}
<!DOCTYPE html>
<html>
<p>This is a paragraph.</p>
</html>
```
---
## What Does HTML Look Like?
* Let's add a heading.
```{html}
<!DOCTYPE html>
<html>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</html>
```
---
## Some special tags
* `<head></head>`
* content **not** displayed in the browser window
* can include things like:
* `<title></title>`: page title (displayed in the top of the browser window/tab)
* `<body></body>`
* content displayed in the browser window
* the main content of your webpage
---
## What Does HTML Look Like?
* Let's add a title.
```{html}
<!DOCTYPE html>
<html>
<head>
<title>COMP1010 Web Apps Class 1</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
---
## HTML Resources
* [Tutorial Republic: HTML](https://www.tutorialrepublic.com/html-reference/html5-tags.php)
* [W3Schools: HTML](https://www.w3schools.com/html/default.asp)
---
## Demo these things:
* Links
* Images
* Lists
* Tables
* Dropdown menus
* Radio buttons
* Forms
---
{"metaMigratedAt":"2023-06-16T20:56:30.285Z","metaMigratedFrom":"YAML","title":"5.1 Web Apps HTML","breaks":true,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"969c3c3d-0ef4-4f08-b22a-2f2b8951224b\",\"add\":2518,\"del\":0}]"}