HTML
Hypertext Markup Language
- Hypertext refers to text that’s not designed to be linear– meaning it allows linking between sites and web pages.
- HTML is the framework of every web page on a browser.
- HTML is not a stylish language which makes it pretty straightforward to code.
- HTML divides a webpage into certain sections like head, body, etc. Telling the browser where to put the content on the page.
COMMENTING IN HTML
<! – comments need to be written between these tags >CASE SENSITIVITY IN HTML
-Files are case sensitive, only to be accurate on linux machines
-Html is not case sensitive
Framework of an HTML script:
<!DOCTYPE html> <!-- This lets your web browser know that the following document will be written in HTML. -->
<html> <!-- begins the HTML document. Everything between the opening and closing # </html> tag is part of the HTML instructions. -->
<head> <!--helps to identify webpage and allows it to show up in search results. These functions are called the “metadata.” -->
<title>here’s the title of my page </title> <!-- the head section provides the page with a name that will appear in search results. -->
</head>
<body>
<p> what’s actually displayed on your webpage such as text, links and images. </p>
</body>
</html>Common HTML Tags
Resource for HTML tags: https://www.w3schools.com/tags/
HTML Elements
• HTML elements are anything that lies between HTML tags such as <body> <img> <h1> thru <h6> <head><ul> <li> etc etc.
• Elements should be closed with a corresponding tag after the content entered like so:
<h1> This is a header! </h1>HYPERLINKS
a – “anchor” links to another place on the site or a different page entirely.
href – “hypertext reference” the web address to which you are linking
target – a finishing touch, good to include but not necessary.
target=”_blank” tells browser to open destination page in a new window or tab. If target is not defined, new page loads over current page (taking user away from customer’s site)
“enter words that will show up as a hyperlink”
</a> close the link tag
<a href=https://www.lealealea.com target”_blank”> Lea Thomas’s Site </a>LISTS
<ul> “unordered list” a list of things in no particular order. Default icons are round •
<ol> “ordered list” follows a specific order as in 1,2, 3, 4. Less common than <ul>
<li> “list items” child elements, things that are in the list
EXAMPLE:
<ul>
<li>Liste item 1</li>
<li>Liste item 2</li>
<li>Liste item 3</li>
<li>Liste item 4</li>
</ul>Use the css property list-style: none to override the default icons.
IMAGES
<img> is a self-closing image tag. Notice how it doesn’t need the closing tag </img>src stands for “source”, as in where the image comes from. This is usually a URL.altstands for “alternative text,” commonly called “alt text.” This is what appears on the front-end if a user’s browser can’t view the image.
Width and height determine the width and height in pixels. Entering just the width would auto-adjust the height to scale.
<img src=” https://images.squarespace-cdn.com/content/v1/557b975be4b071274fbd223a/1583450331419-ATEXNZHEG6HNI9LE87T1/ke17ZwdGBToddI8pDm48kMXRibDYMhUiookWqwUxEZ97gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luUmcNM2NMBIHLdYyXL-Jww_XBra4mrrAHD6FMA3bNKOBm5vyMDUBjVQdcIrt03OQ/Lea_Thomas_PhotobyBelenPrietoBueno.JPG?format=1000w” alt=”Lea Thomas Portrait by Belen Prieto” width=”300” height-“600”>
Formatting with HTML Tabs
https://www.w3schools.com/html/html5_semantic_elements.asp
Semantic HTML tags are descriptive sections that indicate where on the site content will be displayed.
Semantic tag examples: <header>, <main>, <footer>, <article>, <aside>, <nav>
Non-semantic tags help you organize your content in HTML, especially important when you start styling your content with CSS. They group things together but the result won’t point to/make up a specific section of a website like semantic tags will.
Non-semantic tag examples: <div>, <span>
- A <div> “division” groups several elements together into logical sections so they can be styled as a whole.
- A <span> groups just a few words, i.e. “<p> here is a test<span>to show span grouping</span> as an example.</p>
HTML Display Basics
Block elements always start on a new line, take up the full width of a screen, stack on top of each other when they’re created and can have set margins, padding, width, height.
Examples of block elements:
<h1-6>, <div>, <p>, <ul>, etc.
Together, margins, padding, width, height properties comprise what’s called the “box model” (see visual below, courtesy of General Assembly)
“Box Model”
Content is what is within the box.
Padding is the space that wraps around content and pushes it away from the border of the box.
Border can be invisible or styled to be a certain thickness
Margin is the space around the border that pushes the element from other elements on the page.
Inline elements sit within the content that surrounds them, only take as much space as necessary, renders “inline” wherever it is inserted, cannot have margins or padding.
Examples of inline elements:
<a>, <span>, <img>, etc.
infinite loom 