introduction to html and css
play

Introduction to HTML and CSS Dennis Schwartz - PowerPoint PPT Presentation

Nov 24, 2023 •333 likes •687 views

Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Introduction to HTML and CSS Dennis Schwartz Anita-Borg-Celebration JS Workshop TUM Munich March 2016 Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Reminder

  1. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Introduction to HTML and CSS Dennis Schwartz Anita-Borg-Celebration JS Workshop TUM Munich March 2016

  2. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Reminder anita-borg-celebration-munich.biojs.net/materials

  3. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf HTML Hypertext Markup Language

  4. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf

  5. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf <html>

  6. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf <html> <head> <body>

  7. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf <html> <head> <body> <title> <link>

  8. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf <html> <head> <body> <title> <link> <div> <img>

  9. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf <html> <head> <body> <title> <link> <div> <img> <div> <p> <h1>

  10. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf <html> <head> <body> <title> <link> <div> <img> <div> <p> <h1> … … …

  11. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf <html> <head> <body> <title> <link> <div> <img> <div> <p> <h1> … … …

  12. <html> <head> <body> <title> <link> <div> <img> <div> <p> <h1> … … … @dschwartz_pf Anita-Borg-Celebration 2016 Dennis Schwartz

  13. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Document Object Model (DOM) … … … <h1> <p> <div> <img> <div> <link> <title> <body> <head> <html>

  14. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Let’s code!

  15. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf CSS Cascading Style Sheets

  16. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf CSS Cascading Style Sheets Making it look pretty!

  17. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Demo

  18. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf CSS Files

  19. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf CSS Files body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } img { margin: auto; width: 50%; border: 3px solid #73AD21; padding: 30px; }

  20. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Selector Types p { Element Selectors color: red; } #answer { Id Selectors color: red; } .red-text { Class Selectors color: red; }

  21. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Element Selectors HTML CSS

  22. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Element Selectors HTML CSS <p>What is the meaning of life and everything?</p> … … <p>The answer is 42!</p>

  23. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Element Selectors HTML CSS <p>What is the meaning of life and everything?</p> … … <p>The answer is 42!</p> What is the meaning of life 
 and everything? The answer is 42!

  24. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Element Selectors HTML CSS p { <p>What is the meaning of life and color: red; everything?</p> } … … <p>The answer is 42!</p> What is the meaning of life 
 and everything? The answer is 42!

  25. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Element Selectors HTML CSS p { <p>What is the meaning of life and color: red; everything?</p> } … … <p>The answer is 42!</p> What is the meaning of life 
 and everything? The answer is 42!

  26. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Id Selectors HTML CSS

  27. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Id Selectors HTML CSS <p>What is the meaning of life and everything?</p> … … <p id=“answer”>The answer is 42!</p> What is the meaning of life 
 and everything? The answer is 42!

  28. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Id Selectors HTML CSS #answer { <p>What is the meaning of life and color: red; everything?</p> } … … <p id=“answer”>The answer is 42!</p> What is the meaning of life 
 and everything? The answer is 42!

  29. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Id Selectors HTML CSS #answer { <p>What is the meaning of life and color: red; everything?</p> } … … <p id=“answer”>The answer is 42!</p> <h4>Says who?</h4> What is the meaning of life 
 and everything? The answer is 42! Says who?

  30. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Class Selectors HTML CSS

  31. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Class Selectors HTML CSS <p>What is the meaning of life and everything?</p> … … <p class=“red-text”>The answer is 42!</p> <h4 class=“red-text”>Says who?</h4> What is the meaning of life 
 and everything? The answer is 42! Says who?

  32. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Class Selectors HTML CSS .red-text { <p>What is the meaning of life and color: red; everything?</p> } … … <p class=“red-text”>The answer is 42!</p> <h4 class=“red-text”>Says who?</h4> What is the meaning of life 
 and everything? The answer is 42! Says who?

  33. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Let’s code!

  34. Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Next up: JavaScript

Recommend

HTML Introduction (02c) Our Plan G HTML background G Unix and other issues G Minimal HTML

HTML Introduction (02c) Our Plan G HTML background G Unix and other issues G Minimal HTML

HTML Introduction (02c) Our Plan G HTML background G Unix and other issues G Minimal HTML documents G Hyperlinks and URLs Web Concepts: Static Design your PC domain.name Client Software HTTP HTML/HTTP HTML /HTTP HTML Server Internet

965 views • 26 slides
1 Web Application Development HTML 5 Canvas HTML 5 Geolocation HTML 5 SVG HTML 5

1 Web Application Development HTML 5 Canvas HTML 5 Geolocation HTML 5 SVG HTML 5

1 Web Application Development HTML 5 Canvas HTML 5 Geolocation HTML 5 SVG HTML 5 Drag/Drop HTML 5 Google Maps HTML 5 Web Storage HTML 5 Media HTML 5 Web Workers HTML 5 Video HTML 5 Server Sent Events (SSE)

2.01k views • 115 slides
HTML Introduction A.Y. 2020/2021 What HTML is HTML stands for Hyper Text Markup Language

HTML Introduction A.Y. 2020/2021 What HTML is HTML stands for Hyper Text Markup Language

HTML Introduction A.Y. 2020/2021 What HTML is HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements

753 views • 22 slides
Introduction to HTML Shih-Heng Chin Deptartment of Computer and Information Science Soochow

Introduction to HTML Shih-Heng Chin Deptartment of Computer and Information Science Soochow

Introduction to HTML Shih-Heng Chin Deptartment of Computer and Information Science Soochow University Preface What is HTML Characteristic of HTML Goals of This Semester Useful stuff Reference What is HTML !!! When to use HTML Hypertext

275 views • 15 slides
HTML Week 3.1 - IST 263 Section M005 HTML SUMMARY Describe HTML HTML Vocabulary

HTML Week 3.1 - IST 263 Section M005 HTML SUMMARY Describe HTML HTML Vocabulary

HTML Week 3.1 - IST 263 Section M005 HTML SUMMARY Describe HTML HTML Vocabulary Element Tag Attributes HTML RECAP &lt;!doctype html&gt; &lt; html lang=&quot;en&quot;&gt; &lt; head &gt; &lt; title &gt;IST 263 - Week 3, Sample

707 views • 17 slides
HTML HTML is the HyperText Markup Language. HTML files are text files featuring

HTML HTML is the HyperText Markup Language. HTML files are text files featuring

HTML HTML is the HyperText Markup Language. HTML files are text files featuring semantically tagged elements. HTML filenames are suffixed with .htm or .html. Here's a simple HTML file: &lt;html&gt; &lt;head&gt; &lt;title&gt;My

1.05k views • 46 slides
D3 Tutorial Introduction of Basic Components: HTML, CSS, SVG, and JavaScript D3.js Setup Edit by

D3 Tutorial Introduction of Basic Components: HTML, CSS, SVG, and JavaScript D3.js Setup Edit by

D3 Tutorial Introduction of Basic Components: HTML, CSS, SVG, and JavaScript D3.js Setup Edit by Jiayi Xu and Han-Wei Shen, The Ohio State University HTML - H yper T ext M arkup L anguage HTML is the standard markup language for creating Web

1.14k views • 39 slides
Introduction to HTML II Shih-Heng Chin Preface Structure of a HTML File Elements used

Introduction to HTML II Shih-Heng Chin Preface Structure of a HTML File Elements used

Introduction to HTML II Shih-Heng Chin Preface Structure of a HTML File Elements used frequently Tables Structure of a HTML File (HTML Version Information) Head Title Meta Data Body Important Meta Data Content-type Type Charset

382 views • 27 slides
Tutorial Description Tutorial Description Introduction to XML With your HTML knowledge, you have

Tutorial Description Tutorial Description Introduction to XML With your HTML knowledge, you have

Tutorial Description Tutorial Description Introduction to XML With your HTML knowledge, you have a solid foundation for working with markup languages. However, unlike HTML, XML is more flexible, Bebo White allowing for custom tag creation.

1.27k views • 92 slides
Introduction to Data Science: graphics with text. More examples:

Introduction to Data Science: graphics with text. More examples:

Why Interactivity? Reactivity D3 and R D3 Alternatives D3 Tutorial HTML and DOM Reactivity Reactivity Reactivity HTML and DOM D3 and R Shiny and D3 SVG SVG SVG CSS SVG CSS HTML and DOM Binding data to graphical elements Web-based

599 views • 25 slides
Introduction to HTML5 Where to start learning about HTML5? HTML 5 differences from HTML 4

Introduction to HTML5 Where to start learning about HTML5? HTML 5 differences from HTML 4

Introduction to HTML5 Where to start learning about HTML5? HTML 5 differences from HTML 4 http://w3.org/TR/html5-diff/ HTML 5 HTML 4 http://standards.mitsue.co.jp/ resources/w3c/TR/html5-diff/ HTML5 differences

684 views • 35 slides
XHTML vs. HTML XHTML Validation Web Markup Languages HTML 2.0 HTML 4.01 XHTML

XHTML vs. HTML XHTML Validation Web Markup Languages HTML 2.0 HTML 4.01 XHTML

IT350 Web and Internet Programming Fall 2008 XHTML vs. HTML XHTML Validation Web Markup Languages HTML 2.0 HTML 4.01 XHTML 1.0 XHTML 1.1 XHTML 2.0 1 HTML vs. XHTML XHTML: Differences from HTML (part 1)

425 views • 8 slides
XHTML vs. HTML XHTML Validation Web Markup Languages HTML 2.0 HTML 4.01 XHTML

XHTML vs. HTML XHTML Validation Web Markup Languages HTML 2.0 HTML 4.01 XHTML

IT350 Web and Internet Programming Fall 2007 XHTML vs. HTML XHTML Validation Web Markup Languages HTML 2.0 HTML 4.01 XHTML 1.0 XHTML 1.1 XHTML 2.0 HTML vs. XHTML XHTML: Differences from HTML (part 1)

287 views • 15 slides
1 Web Application Development 2 3 Web Application Development HTML What is HTML? HTML is the

1 Web Application Development 2 3 Web Application Development HTML What is HTML? HTML is the

1 Web Application Development 2 3 Web Application Development HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using

1.33k views • 100 slides
HTTP Client to Server: Server replies: HTTP/1.1 200 OK GET ~/index.html HTTP/1.1 Date: Mon, 04

HTTP Client to Server: Server replies: HTTP/1.1 200 OK GET ~/index.html HTTP/1.1 Date: Mon, 04

I NTERNET A PPLICATIONS Chapter 7 L ECTURE O VERVIEW Internet Concepts Web data formats HTML, XML, DTDs Introduction to three-tier architectures The presentation layer HTML forms; HTTP Get and POST, URL encoding;

318 views • 21 slides
(X)HTML &amp; CSS Thierry Sans Client Side HTML Content CSS Presentation Javascript

(X)HTML &amp; CSS Thierry Sans Client Side HTML Content CSS Presentation Javascript

(X)HTML &amp; CSS Thierry Sans Client Side HTML Content CSS Presentation Javascript Processing Why bothering with HTML and CSS when there are great tools out there doing excellent job? HTML - defining the content HTML : Hyper-Text Markup

606 views • 23 slides
Introduction to the Hyper Text markup language (HTML) SE 101 Spiros Mancoridis What is HTML?

Introduction to the Hyper Text markup language (HTML) SE 101 Spiros Mancoridis What is HTML?

Introduction to the Hyper Text markup language (HTML) SE 101 Spiros Mancoridis What is HTML? HTML (Hyper Text Markup Language) is a language for specifying how text and graphics appear on a web page When you visit a web site (e.g.,

370 views • 23 slides
Introduction to HTML (adapted from Laurent Falquet) VI, October 2006 Page 1 Outline Tags,

Introduction to HTML (adapted from Laurent Falquet) VI, October 2006 Page 1 Outline Tags,

Introduction to HTML (adapted from Laurent Falquet) VI, October 2006 Page 1 Outline Tags, structure Definitions Text formatting HTTP, MIME, URL... Tables Images History Links Forms, example Browsers HTML

737 views • 19 slides
Web

Web

Web browser HTTP server DBMS html, gif, CGI CGI html, gif, CGI html, gif, Programs jpeg,

545 views • 31 slides
Chapter 2 - Introduction to HTML5: Part 1 2.1 Introduction / 2.2 Editing HTML5 HTML 5

Chapter 2 - Introduction to HTML5: Part 1 2.1 Introduction / 2.2 Editing HTML5 HTML 5

IT350 Web and Internet Programming Chapter 2 - Introduction to HTML5: Part 1 2.1 Introduction / 2.2 Editing HTML5 HTML 5 (HyperText Markup Language 5) A markup language that specifies the structure and content of documents Separates

467 views • 12 slides
SY306 Web and Databases for Cyber Operations Slide Set #6: Dynamic HTML W3schools HTML DOM Intro,

SY306 Web and Databases for Cyber Operations Slide Set #6: Dynamic HTML W3schools HTML DOM Intro,

SY306 Web and Databases for Cyber Operations Slide Set #6: Dynamic HTML W3schools HTML DOM Intro, DOM Methods, DOM Document, DOM HTML, DOM CSS What is Dynamic HTML The combination of 1. HTML 2. CSS 3. Javascript 4. DOM Used together

551 views • 8 slides
HTML Hyper Text Markup Language HTML 4.0 has strict compliance with XML standard

HTML Hyper Text Markup Language HTML 4.0 has strict compliance with XML standard

HTML and XML Venkat Subramaniam svenkat@cs.uh.edu 1 HTML Hyper Text Markup Language HTML 4.0 has strict compliance with XML standard Presentation details presented with information using markups Browsers act as

607 views • 35 slides
HTML Basics Joan Boone jpboone@email.unc.edu Slide 1 Topics Part 1: HTML Documents Part 2:

HTML Basics Joan Boone jpboone@email.unc.edu Slide 1 Topics Part 1: HTML Documents Part 2:

INLS 572 Web Development HTML Basics Joan Boone jpboone@email.unc.edu Slide 1 Topics Part 1: HTML Documents Part 2: HTML 5.3, Current Specification Part 3: HTML + CSS Slide 2 HTML Basics: Document Structure HTML defines the structure

530 views • 20 slides
Review: Rough Structure &lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;html&gt;

Review: Rough Structure &lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;html&gt;

Break Out Animate, Game Elements Canvas Tutorial Breakout Bill Mill con$nue Modified Tutorial Simple Game: Break Out So=ware developer in Maryland What it Looks Like Review: Rough Structure &lt;!DOCTYPE html&gt;

282 views • 5 slides

More recommend