owned this note
owned this note
Published
Linked with GitHub
---
tags: ResBaz2021
---
# Intro to HTML/CSS
## Friday, May 21st, 2021 2\:00-3\:00
[Back to Resbaz HackMD Directory](https://hackmd.io/@ResBaz21/directory)
Forthcoming
## Getting Started
This workshop is aimed to help researchers learn the basic elements and syntax of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets), so that researchers can build their own websites, show their publications and communicate with other colleagues. Topics covered include: HTML basic elements, attributes, HTML list, HTML table, basic CSS syntax, and HTML/CSS website layout.
## 0 Preparation: Editor
Any Editor you like or you are familiar with will be good. If you don't have an code editor on your PC yet, I recommanded Notepad++, which is totally free, lightweight and easy to use.
Since I don't use MAC, I cannot give very useful suggestion. TextEdit or Xcode sounds popular.
For UNIX-like system, Nano will be a good choice.
Here are some links you might need:
Notepad++: https://notepad-plus-plus.org/downloads/
TextEdit: https://support.apple.com/guide/textedit/welcome/mac
Xcode: https://apps.apple.com/us/app/xcode/id497799835?mt=12
Nano Install Instuction: https://phoenixnap.com/kb/use-nano-text-editor-commands-linux
## 1 HTML and CSS
HTML: Hypertext Markup Language
CSS: Cascading Style Sheets
[W3C](https://www.w3.org/) standards define an Open Web Platform for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device.
## 2 Our First HTML page
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1> Hello World! </h1>
</body>
</html>
```
All HTML documents must start with a <!DOCTYPE> declaration.
## 3 Common Elements
1. Heading
2. Paragraph
3. Document Section <div></div>
5. Block, inline and <br>
6. Page Layout
7. Image
8. List
9. Links
## 4 Adding Style
1. Inline
2. Internal
3. External
## 5 CSS Selector
1. HTML Element
2. Id
3. Class
## 6 CSS Box Model
## 7 Next Step
* HTML/CSS Document: [w3schools Reference](https://www.w3schools.com/tags/default.asp)
* Important Advanced Topics in HTML/CSS:
* HTML/CSS Form
* HTML Audio/Video
* CSS Responsive Design (Flex, Grid, etc.)
* CSS Framework ([Bootstrap](https://getbootstrap.com/), etc)
* Dynamic Website Design & Front-End Development
* JavaScript
* Document Object Model (DOM) Manipulation
* Widespread JS Web Developmet Framework
* [React](https://reactjs.org/)
* [Angular](https://angular.io/)
* [Vue](https://vuejs.org/)
* [Django](https://www.djangoproject.com/)
---
---
## Introductions
- Xinyi Xiao, University of Arizona, Information Science & Technology Student, xinyix@email.arizona.edu, LinkedIn Account: Xinyi Xiao
Hi guys, I am Xinyi Xiao, an international undergraduate student in U of A. I study Information Science and Technology, and I have a Math Minor. I've learnt programming for five years, starting at C. My favourite programming language is Python, but I use JavaScript more often. I hope everyone can enjoy my workshop, and bring some valuable skills from it!
> So teach us to number our days that we may get a heart of wisdom. -- Psalm 90:12
## Questions and Answers
1. Ask your question.
---
:::info
**Session Feedback :mega:**
Use the link below to provide your feedback on the session:
[**Session Feedback Form**](https://forms.gle/TrnJpr9qRBEKdnVVA)
:::
Sign in with Wallet
