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

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

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

706 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
Internet Technologies 2 - WWW and HTML F. Ricci 2010/2011 Content Hypertexts

Internet Technologies 2 - WWW and HTML F. Ricci 2010/2011 Content Hypertexts

Internet Technologies 2 - WWW and HTML F. Ricci 2010/2011 Content Hypertexts Architectural overview of the Web Web browser Thin vs. Thick clients Servers HTML: Hypertext Markup Language URL: Uniform Resource Locator

980 views • 57 slides
In Introduction to Front Fall 2017 End Development Muhammad Shakeel Objectives Setup

In Introduction to Front Fall 2017 End Development Muhammad Shakeel Objectives Setup

Web Development In Introduction to Front Fall 2017 End Development Muhammad Shakeel Objectives Setup development environment Difference between front-end, back-end, and full-stack web development Define roles of HTML, CSS, and

367 views • 14 slides
DATABASE SYSTEMS Introduction to web programming Database Systems Course, 2016 AGENDA FOR TODAY

DATABASE SYSTEMS Introduction to web programming Database Systems Course, 2016 AGENDA FOR TODAY

DATABASE SYSTEMS Introduction to web programming Database Systems Course, 2016 AGENDA FOR TODAY Client side programming HTML CSS Javascript Server side programming: PHP Installing a local web-server Basic PHP usage DB programming with PHP

1.04k views • 63 slides
Attacks on Clients Attacks on Clients (Section 7.1.3 on JavaScript; (Section 7.1.3 on

Attacks on Clients Attacks on Clients (Section 7.1.3 on JavaScript; (Section 7.1.3 on

Software and Web Security 2 Software and Web Security 2 Attacks on Clients Attacks on Clients (Section 7.1.3 on JavaScript; (Section 7.1.3 on JavaScript; 7.2.4 on Media content; 7.2.6 on XSS) sws2 1 Last week: web server can be attacked

829 views • 43 slides
Talk overview Introduction and historical background Multiple delivery publishing (MDP)

Talk overview Introduction and historical background Multiple delivery publishing (MDP)

Structured Documents on the Web Jacco van Ossenbruggen CWI Amsterdam Talk overview Introduction and historical background Multiple delivery publishing (MDP) MDP on the Web: Style sheets Conclusion intro/history MDP w eb

532 views • 22 slides
A Tree Logic... ... and an Application for the Analysis of Cascading Style Sheets Pierre Genevs

A Tree Logic... ... and an Application for the Analysis of Cascading Style Sheets Pierre Genevs

A Tree Logic... ... and an Application for the Analysis of Cascading Style Sheets Pierre Genevs CNRS Tyrex team pierre.geneves@inria.fr Toccata seminar, LRI Feb. 22 nd , 2013 1 / 27 Outline 1 Insights on the L Tree Logic 2

892 views • 39 slides
F l u x &amp; R e a c t F l u x &amp; R e a c t We b A p p l i c a t

F l u x &amp; R e a c t F l u x &amp; R e a c t We b A p p l i c a t

F l u x &amp; R e a c t F l u x &amp; R e a c t We b A p p l i c a t i o n D e v e l o p me n t Ma r k R e p k a T o p i c s C o v e r e d I n t r o d u c t i o n t o

508 views • 23 slides
Introduction to Javascript ATLS 3020 - Digital Media 2 Week 2 - Day 2 Overview 1. What is

Introduction to Javascript ATLS 3020 - Digital Media 2 Week 2 - Day 2 Overview 1. What is

Introduction to Javascript ATLS 3020 - Digital Media 2 Week 2 - Day 2 Overview 1. What is javascript? 2. Output 3. Variables 4. Comments 5. Input 6. Putting it all together What is javascript? Output Variables Comments Input Putting

485 views • 20 slides

More recommend