HTML 1
Case types
In the programming world we use different cases for different languages and purposes:
- lowercase
- UPPERCASE
- camelCase
- PascalCase
- slug_case
- kabab-case
Hyper Text Markup Language
- Made of Tags
- Hierarchical
- All lower case
- Describes the structure and content of the page
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>- Responsible for page styling and layouting
- Targets HTML elements for styling through selectors
- All lower case and kabab-case
A breif word about CSS
Cascading Style Sheet
body {
background:red;
font-size:20px;
}Exercise
Turn off a page CSS on a page
- Install the Web Developer chrome extension
- Navigate to a beautiful web page
- Open the Web Developer extension
- CSS > Disable all styles
- Behold! The internet, 1994 version!
Demo
A look at a page with DevTools
Exercise
-
Go to google.com
- Using DevTools
- Delete the google logo
- Change the text inside the “Google Search” button to something els
-
Refresh the page, why are the changes gone ?
<!-- this is a remark -->
<!-- container tag -->
<p>This is the paragraph content</p>
<!-- container tag with attribute-->
<p id="para">This is the paragraph content</p>
<!-- self-closing tag -->
<br/>- Container tags
- Self-closing tags
- Attributes (name="value")
- Remarks
- Text
HTML Anatomy
- Block elements are positioned on a new line
- inline elements are positioned one after the other on the same line, the line height is determined by the tallest element (like an image)
Block vs. Inline Elements
Exercise
- Use the DevTool selection tool to inspect various elements on a page
- Which do you think is block and which is inline ?
- Whitespace is explicit in HTML
- Use <br/> or to create it
Whitespace
- h1-h6
- p
- b
- i
- pre
- br
- code
Text Tags
-
ul
-
ol
-
li
List Tags
Links
<!-- absolute link -->
<a href="http://www.google.com">Google site</a>
<!-- relative links -->
<a href="index.html">Home</a>
<a href="../secondPage.html">Second page</a>
<a href="pages/thirdPage.html">Third page</a>
<!-- target attribute -->
<a href="pages/thirdPage.html" target="_blank">Third page</a>Links - hash
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#history">History of the world</a>
<br/>
Some text here ...
<br/>
<br/>
<h1 id="history">The history of the world</h1>
<!--link to a specific place in a page-->
<a href="https://en.wikipedia.org/wiki/Elton_John#Early_life">
Elton John early life
</a>
</body>
</html>Anchors can link inside a page also
End
HTML 1
By Netcraft
