Introduction to HTML and CSS

class: title-slide

<br>
<br>
.pull-right[

# Introduction to HTML and CSS
## Dr. Mine Dogucu
]

---

class: inverse middle

.font75[**H**yper**t**ext **M**arkup **L**anguage]

---

class: center middle

## An ugly web page

<img src="img/ugly-website.png" width="80%" style="display: block; margin: auto;" />

---
class: center middle

### HTML document outline

<video width="80%" height="45%" align = "center" controls>
  <source src="screencast/5-html-start.mp4" type="video/mp4">
</video>

---

class: center middle

### Paragraphs

<video width="80%" height="45%" align = "center" controls>
  <source src="screencast/5-p-tag.mp4" type="video/mp4">
</video>

---

class: center middle

### Hyperlinks

<video width="80%" height="45%" align = "center" controls>
  <source src="screencast/5-a-tag.mp4" type="video/mp4">
</video>
---

`<a href="https://www.r-project.org/">R</a>`

<br>

--

.pull-left[`<a> </a>`] .pull-right[HTML tag]

<br>

--

.pull-left[`href`] .pull-right[attribute (name)]

<br>

--

.pull-left[`https://www.r-project.org/`].pull-right[attribute (value)]

<br>

--

.pull-left[`R`] .pull-right[content]

---

class: center middle

### Spans

<video width="80%" height="45%" align = "center" controls>
  <source src="screencast/5-span-tag.mp4" type="video/mp4">
</video>

---

class: inverse middle

.font75[**C**ascading **S**tyle **S**heets]

---
class: center middle

### Styling

<video width="80%" height="45%" align = "center" controls>
  <source src="screencast/5-style-css.mp4" type="video/mp4">
</video>

---
class: center middle

<img src="img/html-tree.jpeg" width="80%" />