HTML & CSS Basics: Building Websites and Understanding Markup
"Learn the essentials of HTML and CSS, including creating websites, formatting text, inserting links and images, and controlling the look of your content using CSS. Understand HTML tags, CSS selectors, and properties to kickstart your web development journey."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
HTML & CSS Part 1: Getting Started
Workshop Overview Introducing HTML & CSS What are they? How do we recognize them? Accessibility and web design HTML Formatting Text Inserting Links & Images CSS Color Font Size Practical Practice How to practice what you ve learned.
Building a Website Building a website requires: HTML CSS Other Languages (JavaScript, PHP, etc.) Even if you don t see it, the code is there. WordPress Wix SquareSpace
What is HTML? Hyper Text Markup Language The foundational code of a website. Controls content of a webpage. Current version: HTML 5
The HTML Tag Opening Tag <p> Closing Tag </p> Forward Slash Character(s) Character(s) Left Angle Bracket Right Angle Bracket Left Angle Bracket Right Angle Bracket
The HTML Code Note that the HTML, Head, and Body tags go in every document. Title, P, and H1 are tags you ll use often to format. You don t need to indent HTML, but spaces can help with legibility. Those spaces DO NOT indicate a space in your content. HTML tags are case-insensitive. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
What is CSS? Cascading Style Sheets Controls the look of your content. CSS can be: Inline in the HTML code. Internal in the head of the HTML document. External (recommended) in a .css document that s referenced by multiple HTML documents. Current Version: CSS 3
CSS Selectors, Properties, and Values p { color: #000000; } Selector Right Curly Bracket Left Curly Bracket Colon Property Value Semicolon
The CSS Code body { background-color: lightblue; } CSS will use indents and spaces to help with legibility. Colons and Semicolons separate the properties and values. Make sure to include them. You need to have a right curly bracket to close out the code. h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
A Note on Accessibility Everyone relies on the web, so we should build websites that consider all types of visitors. Write your HTML and CSS code to help those who are: Blind and Low Vision Deaf Dyslexic Color-blind And so many more. We ll talk more about how tools read your HTML and CSS throughout the workshop.
