introduction to
play

Introduction to HTML & CSS Instructor: Beck Johnson Week 2 - PowerPoint PPT Presentation

May 10, 2023 •326 likes •1.1k views

Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!

  1. Introduction to HTML & CSS Instructor: Beck Johnson Week 2

  2. today • Week One review and questions • File organization • CSS Box Model: margin and padding • Background images and gradients with CSS • Make a hero banner!

  3. REVIEW!

  4. REVIEW: WEBPAGECOMPONENTS html css Javascript Brings content and Structures and Styles the markup and design to life organizes content creates layout

  5. REVIEW: HTMLDOCUMENTS • <!DOCTYPE html> tells the browser it's serving an HTML file using HTML5 standards • <html> wraps the whole document • <head> wraps the metadata and styles • <body> wraps the visible content • Most HTML elements have opening and closing tags and some have attributes

  6. REVIEW: layout elements • <header> wraps header content • <footer> wraps footer content • <nav> indicates that everything inside is related to navigation • <section> is used to define content sections

  7. REVIEW: HTMLCONTENT • Headings create an header/outline <h1> ... <h6> • Paragraphs and lists structure text <p> <ul> <ol> • Images and links both require attributes to work

  8. Review: IMAGES <img src="kitten.jpg" alt="Cute kitten" /> • Does not have a closing tag (“self - closing”) • Two required attributes : • src is where the file lives (local or external) • alt is a description of the image (used for screen readers, search engines, etc.)

  9. Review: Links <a href="http://google.com">Google</a> • Creates a link to other pages or websites • The href attribute says where the link should go • Anything inside <a> tags is clickable

  10. Review: Dev tools Right-click > Inspect, or hit the F12 key

  11. REVIEW: Css CSS (Cascading Style Sheet) is a different type of language than HTML, and has its own syntax CSS can go directly in your HTML file, inside a • <style></style> element CSS can be added in a separate .css file that can be • linked to your HTML page

  12. REVIEW: EXAMPLE CSSRULE p { color: blue; } • selector is p (all <p> tags in the HTML) • property is color • value is blue (many color names are supported, or use the hex code #0000ff )

  13. QUESTIONS?

  14. FILE ORGANIZATION

  15. FILEORGANIZATION Typical files in a website include: HTML files (.html) CSS files (.css) Javascript files (.js) Images (.png, .jpg, .gif) • Usually devs make subdirectories for media, CSS, and Javascript files

  16. Code organization • Comment your files – especially if you have unfinished development code, or if you think you may forget why you made the decision you did • Indent and space out your code so that it’s easier for you to read

  17. FILE NamingRULES • Spaces in folders or file names can cause issues • Most devs prefer to separate words in files using capitalization, dashes, or underscores likeThis or-this this_is_also_used

  18. Url-scuse me? A URL is a path to a file, either on your computer or a remote computer (a “server”) When you type an URL into your browser, it’s navigating to a file stored on a server When you use an URL in a src for an <img> tag, it finds that image by navigating to that location, starting from the folder that the HTML file is inside <img src="image.gif" / >

  19. absolute FILEPATHS Absolute paths are URLs that start with http or https <a href="http://google.com">Ubiquitous search engine</a> • Because these files are not hosted by you, if someone renames or deletes the file, your link will be broken

  20. Relative file Paths Relative paths are URLs that are located relative to your current file • Relative paths start with / or ../ or are a filename • Any files that are saved on your local drive should be linked using relative paths <a href="other-page.html">Link to another page on my website that is in the same folder</a>

  21. Relative file Paths Use ../ in a path to navigate “up” a directory (image.gif is in same folder) <img src="image.gif" / > <img src="../images/image.gif" / > (image.gif is in parent folder)

  22. css indentation This is one popular way to indent CSS • Starting bracket is on the same line as the selector • Each property is on its own line, tabbed once • Ending bracket is on its own line

  23. html indentation This is a standard way to indent HTML • Children elements are tabbed once Most elements are • on a new line

  24. {} CSS organization Last week, we made CSS changes directly in the <head> element of our HTML documents • These internal styles only apply to that page (but affect every element on that page that is styled)

  25. {} CSS organization You can also add inline styles to a single element by using the style attribute in HTML markup <p style="color: red">This paragraph is special.</p> Inside the style attribute, use the same • syntax as CSS ( selector: value ) Typically discouraged, because it can be hard • to maintain

  26. {} CSS organization The most common way to use CSS in the real world is to use an external stylesheet . CSS lives in a separate .css file • The same stylesheet can be included on • multiple pages A single page can include multiple • stylesheets

  27. {} Linking to externalstylesheet <link href="css/styles.css" rel="stylesheet"> • Tells the browser to find and load the styles.css file from a css directory • The rel attribute stands for "relation" - in this case, this link's relationship to the document is "stylesheet" • This tag goes inside the <head> element • Should be on every page that needs the styles

  28. {} The “CASCADING” Part The beauty of CSS is being able to create styles and then override them when you want to customize the look of your pages. There are 3 rules for determining how styles get applied: • Styles are applied from far to near • Styles are applied from top to bottom • Children elements are more specific than parents

  29. {} far to near Styles that are “closer” to the elements they style take precedence, so that they apply in this order: Browser defaults External (from a .css file) Internal (from styles in the <head> ) Inline (directly on the element)

  30. {} Top tobottom CSS rules are applied sequentially If the same property is styled multiple times for the same selector, the last one wins p { color: red; } p { color: green; } /* this one wins */

  31. {} HTML children In an HTML document, an element that is nested inside another element is referred to as a “child” of that element • <h2> is a child of <header> • <a> are children of <nav> Both <a> and <h2> are also children of <section>

  32. {} HTML children In CSS, to style only elements that are inside another element, use this syntax: parent child { property: value; } nav a { color: #c4fe46; } “Change the color of links that are contained within a nav ”

  33. {} Children arespecific Children elements inherit styles from their parents, but can override with their own style p { color: #daa645; } /* all paragraphs */ b { color: #e7c0c8; } /* bold text in general */ p b { color: #c4fe46; } /* bold text in paragraphs */

  34. PRACTICE TIME!

  35. Practice file organization Create a folder for your images and move all images there Fix the paths in all your <img src> tags so that images show • like before Create a new file called styles.css Copy and paste the styles from inside <style></style> into • that .css file Add a link to your new stylesheet on all of your webpages: <link href="styles.css" rel="stylesheet"> Prettify your CSS and HTML so that it’s easy to read Use indentation and whitespace •

  36. THE CSS BOX MODEL

  37. CSS BOXMODEL Content : stuff in the box Padding : bubble wrap and packing peanuts Border : sides of the box Margin : space between multiple boxes

  38. CSS BOXMODEL

  39. Padding Padding creates space inside an element. Padding affects how far content is from the border. p { padding-top: 20px; padding-right: 5px; padding-bottom: 40px; padding-left: 10px; } Shorter way: p { padding: 20px 5px 40px 10px; }

  40. Padding Padding is useful for moving content away from the edges of its container.

  41. Padding If top/bottom and left/right padding match… p { padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } Combine them! p { padding : 20px 10px; }

  42. Padding If all padding matches… p { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } Combine EVEN MORE! p { padding : 20px; }

  43. Padding Padding can be applied only to the top, only to the bottom, and so on – or any combination of those: p { padding-left: 40px; } p { padding-top: 20px; padding-right: 10px; }

  44. MARGIN Margin moves elements away from one another. img { margin: 6px; }

  45. MARGIN Margin creates space outside an element. • Same abbreviation style and rules as padding p { margin-top: 20px; margin-right: 5px; margin-bottom: 40px; margin-left: 10px; } Is the same as p { margin: 20px 5px 40px 10px; }

Recommend

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

TRAINING COURSE ON SOCIAL PROTECTION &amp; FORMALIZATION TRINIDAD AND TOBAGO MARCH 15, 2017 INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION Design of the NIS Assistance from the

547 views • 23 slides
INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

Patterns of variation in the expression of case and agreement Andrs Brny Leiden University Centre for Linguistics 9 November 2019, BaSIS Workshop a.barany@hum.leidenuniv.nl INTRODUCTION Introduction 2/42 INTRODUCTION

1.37k views • 42 slides
Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures Definition and concepts Process and product properties Principles SE Approaches Motivation Software and the economy The economies of

1.03k views • 49 slides
Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1 https://www.cdc.gov/std/stats17/infographic.htm Introduction Epidemiology in Western Colorado CPHE Surveillance Data Report, May 2018 Chlamydia Epidemiology in Western

977 views • 39 slides
DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every meeting (2) Some ideas of diagrams for section 7.1 (Introduction) of TP. Giles Barr 25 Jan 2018, Pembroke College On DUNE, the reality is there is a

474 views • 10 slides
INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

ADVANCED COMPUTER SECURITY INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT IS SECURITY? A systems security policies describe What the system is supposed to do Store and provide access

479 views • 16 slides
Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout World Wide

387 views • 14 slides
14 Introduction Introduction Bad guys can put malware into Example: hosts

14 Introduction Introduction Bad guys can put malware into Example: hosts

Introduction Introduction source Encapsulation ISO/OSI reference model message M application segment H t H t M transport network datagram H n H n H t M presentation: allow applications to frame link H l H n H t M interpret

583 views • 4 slides
Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout

322 views • 8 slides
Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Introduction Zynq Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL Processing System Processor Peripherals Data Buses AXI Bus Conclusion BTE5380 - Embedded Systems Octobre 2014 Andreas Habegger

1.81k views • 30 slides
2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04 Project References S E 5 PART.1 SMILE5 Introduction M I L Introduction STORION-SMILE5 Residential Energy Storage System Inverter 5kW Output Input

1.06k views • 25 slides
Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an application server? Why use an application server? Course introduction Services provided by CICS How CICS applications are defined Scaling CICS to meet

1.84k views • 146 slides
Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic building blocks Node Links (relationship between nodes) Spatial information Network data

584 views • 9 slides
Introduction Introduction (1) Main argument of the paper: universities are not only

Introduction Introduction (1) Main argument of the paper: universities are not only

Le jugement des pairs comme outil de management des universits Peer-review as a management tool Christine Musselin (CSO, Sciences Po et CNRS) Avril 2013, Lirrsistible ascension du capitalisme acadmique Introduction Introduction (1)

590 views • 28 slides
Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Moreno Baricevic Gilberto Daz Axel Kohlmeyer Stefano Cozzini ULA ICTP CNR-IOM DEMOCRITOS Merida, VENEZUELA Trieste, ITALY Trieste, ITALY Introduction Introduction to storage and to storage and filesystems filesystems Introduction

1.19k views • 51 slides
JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of the brand new JA-100 alarm system Visions Basic architecture System components Setting Help us with final validations You are the FIRST ones

1.69k views • 111 slides
1 Introduction Introduction Communication System Baseband an adjective that describes

1 Introduction Introduction Communication System Baseband an adjective that describes

Introduction Introduction Physical Layer Mobile network Global ISP Provides the means to transmit bits Basic Concepts of from sender to receiver, Data Transmission Defines the mechanical, electrical, and Home network timing

463 views • 7 slides
Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

INFOGR Computer Graphics Jacco Bikker - April-July 2015 - Lecture 1: Introduction Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical Details Assignments Field Study State of

869 views • 62 slides
Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Virtual and Augmented Reality Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction Who am I? What do I do here? 2 About me Short research bio: - 2014 - finished PhD at FMFI UK - 2014 2016 -

1.3k views • 39 slides
PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience for your presentation. It tells them what your presentation is about, why it is important, and finally, what to listen for in your speech. Get the

505 views • 3 slides
How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

Introduction to Beamer Hafida Benhidour How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer Introduction to Beamer Hafida Benhidour Department of computer science King Saud University November

732 views • 49 slides
Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Shenzhen Cuilu jewelry Co., Ltd

147 views • 14 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

735 views • 34 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

558 views • 18 slides

More recommend