1. Hyperlinks (with text and image)
Video
Hyperlinks (2:40)
Practice working with Hyperlinks
2. CSS - Cascading Style Sheet (just the beginning)
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
Note to remember: HTML always works, but CSS does not work without HTML in the body
Demo: One HTML Page - Multiple Styles!
3 types of CSS:
There are 3 types of CSS
IN_LINE, INTERNAL and EXTERNAL
In-line styles are inserted directly into an HTML tag to style an element that is inside that tag.
Example:
<span style="color: #cccccc;">Some text</span>
Note: the element <span> is used to style text (size, family, color, etc.).
Internal styles are used for one page; they are located in the <style> tags inside the head section of this
page. These styles are referred and applied to the elements that are inside the body of the page.
For example, if you want a paragraph text to be red and its font size 20 pixels, the code should be:
<html>
<head>
<title>Page Name</title>
<style>
p {
color: red;
font-size:20px;
}
</style>
</head>
<body>
<p>This paragraph text will be red with the font size 20 pixels </p>
<p>This paragraph text will also be red with the font size 20 pixels </p>
</body>
</html>
External - With an external style sheet, you can change the look of an entire website by changing just one file!
We will speak about it later on
3. Project 1- mini webpage "About Me".
Due - next class
The page will have:
- Your name
- Your portrait (file should be high quality, with width no bigger than 375-380 pixels)
- A short paragraph about yourself
- Several social media icons linked to the corresponding sites
Example:
Ellen Baryshev
Students examples: click on the Students' Examples link, Fall 2023 Semester, About Me project
Hint: to see the code, right mouse click on the page, View Page Source (works on Firefox and Chrome browsers, not on Safari)
Social media icons to use:
1. Study
Book:
HTML and CSS: Design and Build Websites
(Study whatever we covered in class)
Chapter 2: Text
Chapter 4: Links
Chapter 5: Images
Or/and Book:
Learn to Code HTML and CSS
Lessons 1 and 2
-
Hypelinks (till "HTML Links - Create a Bookmark" part for now)
-
Sequence of videos:
1.
Hyperlinks (2:40)
2.
Hyperlink Pages (2:30)
3.
Hyperlink - image (6:05)
-
Images and Hyperlinks (5.5 minutes)
-
Textbook HTML and CSS: Chapter 4 - Links, pages 79-92; Chapter 5 - Images, pages 94-119;
-
From w3schools Hypelinks (till "HTML Links - Create a Bookmark" part for now)
2. CSS
1.
CSS Handout Read the parts that we studied in class
Note: it is a good idea to print the whole handout and always keep it with you
2.
Three Ways to Insert CSS
Internal CSS
Inline CSS
3. Textbook:
HTML and CSS: Design and Build Websites
Start reading chapter 10, Introducing CSS (whatever we covered in class)
3. Continue and finish working on your Project 1, About Me
1. Put your name in big font size
2. Place your real photo instead of a placeholder image
3. Put several lines of text about yourself
4. Put several social media icons and link them to the corresponding sites to be opened in the external browsers
5. When finish, put all files in the folder "about" in the dropbox.
Codes to use: copy and modify
ellenbaryshev@gmail.com.