-
Notifications
You must be signed in to change notification settings - Fork 0
/
slideshow.html
917 lines (836 loc) · 35.6 KB
/
slideshow.html
1
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Index ~ Make an iOS and Android App ~ Girl Develop IT</title> <meta name="description" content="This is the Girl Develop It curriculum to teach women how to make an iOS and/or Android app with Buzztouch. Buzztouch is a content management system for making apps. Content is on the control panel, and the app is compiled in Xcode or Android Studio. The course is meant to be taught in 2 hours, with a third optional hour to assist students with making and compiling their apps."> <meta name="author" content="Girl Develop It"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <link rel="stylesheet" href="reveal/css/reveal.css"> <link rel="stylesheet" href="reveal/css/theme/gdidefault.css" id="theme"> <!-- For syntax highlighting --> <!-- light editor<link rel="stylesheet" href="lib/css/light.css">--> <!-- dark editor--><link rel="stylesheet" href="reveal/lib/css/dark.css"> <!-- For use of font-awesome icons --> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- Custom CSS --> <link rel="stylesheet" href="css/global.css"> <!-- If using the PDF print sheet so students can print slides--> <link rel="stylesheet" href="reveal/css/print/pdf.css" type="text/css" media="print"> <!--[if lt IE 9]> <script src="lib/js/html5shiv.js"></script> <![endif]--> </head> <body> <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides"> <!-- Welcome--> <!-- Opening slide --> <section> <img src = "images/gdi_logo_badge.png"> <h3>Beginning HTML and CSS</h3> <h4>Class 1</h4> </section> <section class="hide-pdf"> <h3>Before We Begin</h3> <ul> <li>Bathrooms</li> <li>Meet our awesome TA's!</li> <li>Policy on Questions</li> <li>We are here for you!</li> <li>Have fun!</li> </ul> </section> <section class="hide-pdf"> <h3>About your instructor</h3> <h4>Sam Oyen</h4> <ul> <li>Minnesota Born and Raised</li> <li>Applications Developer at General Mills</li> <li>Fun Fact: I studied abroad in Malta</li> <!-- <li>Twitter: <a href="http://www.twitter.com/codelala" target="_blank">@codelala</a></li> <li>E-mail: <a href="mailto:hello@codelala.com">hello@codelala.com</a></li> <li>Website: <a href="www.codelala.com">www.codelala.com</a></li>--> </ul> <div style="align: center"> <img src="images/map_europe.gif" height="300" width="350"> </div> </section> <section> <div class = "left-align hide-pdf"> <h3>Tell us about yourself</h3> <ul> <li>What's your name?</li> <li>What do you hope to get out of the class?</li> <li>Tell us one fun fact about you?</li> <img src="images/dinosaur.jpeg" /> </ul> </div> </section> <!-- What is HTML?--> <section> <h3>What is HTML?</h3> <p>HTML is the code that allows us to build websites</p> <img src = "images/homepage-view.png"> </section> <section> <h3>What does HTML look like?</h3> <p>If you (rt + click) and 'view source', you see this:</p> <img src = "images/homepage-html.png"> </section> <!-- History of HTML--> <section> <h3>Brief History of HTML</h3> <ul> <li class = "fragment">Invented by Tim Berners-Lee</li> <li class = "fragment">Created "hypertext" to share scientific papers</li> <li class = "fragment"><span class="blue">H</span>yper<span class="blue">T</span>ext <span class="blue">M</span>arkup <span class="blue">L</span>anguage (HTML)</li> <li class = "fragment">Formed the <span class="blue">W</span>orld <span class="blue">W</span>ide <span class="blue">W</span>eb <span class="blue">C</span>onsortium (W3C) which defines Web technologies and standards</li> </ul> </section> <section> <h3>Timeline of HTML</h3> <ul> <li class = "fragment">Early 90s - <span class = "yellow">H</span>yper<span class = "yellow">T</span>ext <span class = "yellow">M</span>arkup <span class = "yellow">L</span>anguage</li> <li class = "fragment">1997 - HTML 4</li> <li class = "fragment">2000 - XHTML</li> <li class = "fragment">2008 - HTML 5</li> </ul> </section> <!-- Terms--> <section> <h3>Terms</h3> <ul> <li> <div class = "green">Web design</div> <div>The process of planning, structuring and creating a website</div> </li> <li> <div class = "green">Web development</div> <div>The process of programming dynamic web applications</div> </li> <li> <div class = "green">Front end</div> <div>The outwardly visible elements of a website or application</div> </li> <li> <div class = "green">Back end</div> <div>The inner workings and functionality of a website or application.</div> </li> </ul> </section> <!-- Nitty gritty 1 - Clients and servers --> <!-- <section> <h3>Clients and servers</h3> <p>How your computer accesses websites</p> <img src = "images/client-server.png"/> </section> --> <!-- Nitty gritty 2 - Tools --> <section> <h3>Tools</h3> <div style="text-align: left;"> <p class = "yellow">Suggested Browsers for Development</p> <p>Chrome - <a href="http://www.generalmills.com/" target="_blank">Developer Tools (F12)</a></p> <p>Firefox - Inspector (F12)</p> <p>...that in mind, test in all browsers!</p> </div> <br/> <!-- W3C makes standards - all browsers "interpert" html in different ways/error handling different/ different features supported New features come out in HTML 5, lag between when it comes out and when the browser releases a new version to support. --> <div style="text-align: left;"> <p class = "yellow">Text Editor</p> <p>Sublime Text (Linux, Mac or Windows)</p> <p>TextWrangler (Mac)</p> <p>Notepad ++ (Windows)</p> <p>gedit (Linux)</p> </div> </section> <!-- Commenting out sublime text intro so teachers can choose whether or not to use sublime text in class--> <!-- intro to sublime text 2 --> <!-- <section> <h3>Get Started: Sublime Text 2</h3> <p class="left"><strong>We'll be using Sublime Text 2 in class today.</strong></p> <ol> <li> <p>Download ST2 from www.sublimetext.com/2</p> </li> <li> <p>Turn off Auto Correct & Tab Completion<br/></p> <p>Modify your the preferences / settings by adding these lines to the code:</p> <ul > <li style="margin: 0 0 0 40px;">"tab_completion": false</li> <li style="margin: 0 0 0 40px;">"auto_complete": false,</li> </ul> </li> </ol> </section> --> <!-- Example of site we'll be making--> <section> <h3>What we'll be building in this class</h3> <div> <img src="images/session1site.png"/> </div> </section> <!-- HTML vs CSS --> <section> <h3>Anatomy of a website</h3> <div> Your Content <span class = "blue">+ HTML </span>= <span class = "green">Structure</span></div> <div>Structure <span class = "blue">+ CSS </span>= <span class = "yellow ">Presentation</span></div> <div>Structure + Presentation = <span class = "pink">Your Website</span></div> <hr> <p>A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.</p> </section> <!-- Roles of HTML v CSS --> <section> <h2>A Dive Into HTML</h2> <div style="padding-top: 10%;"> <h4 class = "yellow"><b>Elements</b></h4> <p class = "yellow"> The Building Blocks of Websites</p> <br/> <p><a href="http://www.generalmills.com/" target="_blank">What does an element look like?</a></p> </div> </section> <section> <img style="max-height: 700px" src="images/MyElementBlocks.png"/> </section> <section> <h3>Anatomy of a website</h3> <div class = "yellow"> Concrete example</div> <ul> <li class = "fragment"> <div style = "font-size: 80%">HTML Code: Definition of a paragraph HTML element</div> <pre><code class ="html"> <p>Oh, hey! Look at my cool paragraph.</p> </code></pre> </li> <li class = "fragment"> <div style = "font-size: 80%">How that HTML Code is rendered in a browser</div> <br/> <p>Oh, hey! Look at my cool paragraph.</p> </li> </section> <!-- HTML element--> <section> <h3>Anatomy of an HTML element</h3> <ul> <li class = "fragment"> <strong class="blue">Element</strong> <ul> <li>An individual component of HTML</li> <li>Paragraph, heading, table, list, div, link, image, etc.</li> </ul> </li> <li class = "fragment"> <strong class="blue">Tag</strong> <ul> <li>Opening tag and Closing Tag which marks the beginning & end of an element <pre><code class ="html"><p>Stuff in the middle</p></code></pre> </li> <li>Tags have names that indicate the tags purpose</li> <pre><code class ="html"><p> This is a sample paragraph.</p></code></pre> </li> </ul> </section> <!--anatomy of a tag --> <section> <h3>Tag Breakdown</h3> <img src="images/tagbreakdown.png" alt="Tag breakdown" style="border: none; box-shadow: none;" /> </section> <section> <h3>Anatomy of an HTML element</h3> <p>There are two types of elements:</p> <ol> <li class = "fragment"> <strong class="blue">Container Element</strong> <ul> <li>An element that can contain other elements or content</li> <li>e.g. A paragraph (<p>) contains text</li> <li>e.g. The body (<body>) contains elements displayed in browser</li> </ul> </li> <li class = "fragment"> <strong class="blue">Stand-Alone Element</strong> <ul> <li>An element that cannot contain anything else</li> <li><pre><code class = "html"><br/></code></pre> </li> </ol> </section> <section> <section> <h3>Anatomy of an HTML element</h3> <ul> <li> <strong class="blue">Attribute</strong> <ul> <li>Provides additional information about an HTML element</li> <li>Attributes come in name/value pairs: name="value"</li> <li>Attributes are always specified in the opening start tag</li> <li>e.g. <code class ="html"><p class="error">...</p></code></li> </ul> </li> </ul> <br/> <br/> <br/> <i class="fa fa-arrow-down"></i> </section> <section> <ul> <li> <strong class="blue">Value</strong> <ul> <li>Value is the value assigned to a given attribute.</li> <li>Values must be contained inside quotation marks.</li> <li><pre><code class ="html"><p class="error">incorrect password</p><img src="my_picture.jpg" /><a href="http://girldevelopit.com">GDI</a></code></pre> <li>Attribute name/value pairs can be used with CSS and JavaScript to interact with the element in a visual and dynamic way</li> </li> </ul> </section> </section> <section> <h1>How do we create an HTML page?</h1> </section> </section> <!-- Folder Structure --> <section> <h3>Website Folder Structure</h3> <p>All files and resources needed for a site should be stored within the same folder.</p> <div class="left" style="width: 45%;"> <p class="left-align"><strong>This includes:</strong></p> <ul> <li>HTML Files</li> <li>CSS Files</li> <li>Images</li> <li>Script files</li> <li>Anything else that will appear on your site</li> </ul> <p class="left-align"><small>Note: File names should not include spaces or special characters. File names ARE case sensitive.</small></p> </div> <div class="right" style="width: 45%;"> <img src="images/folderstructure1.png" /> </div> </section> <section> <h3>Let's Develop It</h3> <ul> <li>Create a folder called 'MyFirstSite'</li> <li>Within this folder: add a folder called 'images'</li> <br/> <li>Open the Sublime Text application</li> <li>In the menu bar, select <span class="yellow">File ></span> <span class="yellow">New File</span> to create a new file</li> <li>Save it as <span class="blue">index.html</span> inside your 'MyFirstSite' folder</li> </ul> </section> <!-- HTML Page--> <section> <h3>Doctype</h3> <p>The first element on an HTML page is the <code class = "html blue"><!DOCTYPE></code>: tells the browser what type of data is being given to the browser</p> <p>Followed by the <code class = "html green"><html></code> element: contains all page content</p> <pre><code class = "html"> <!DOCTYPE html> <html> </html> </code></pre> <p><small>* The doctype is not case-sensitive. <br/>DOCtype, doctype, DocType and DoCtYpe are all valid.</small></p> </section> <section> <h3>Head and Body Tags</h3> <p>Inside the HTML tags we have two very important tags:</p> <div class = "left-align"> <p class = "fragment"><span class="green">Head:</span> The head contains metadata or additional information about the page. Meta information is <span class="blue">not visible</span> to the user, but has many purposes. One of which is to tell search engines about your page, who created it, and a description.</p> <span><code class="html"><head><title>My Homepage</title></head></code></span> <p class = "fragment"><span class="green">Body:</span> The body contains the actual content of the page. Everything that is contained in the body is <span class="blue">visible</span> to the user.</p> </div> </section> <section> <h3>Head and Body Tags</h3> <pre><code class = "html"><!DOCTYPE html> <html> <head> <title>GDI</title> <meta name="description" content="Official Girl Develop It page"> <meta name="author" content="Girl Develop It"> </head> <body> ...The page content here... </body> </html> </code></pre> </section> <!--example of head and body tags--> <section> <img src="images/example-headbody.png" alt="example of head and body" /> </section> <!-- Develop it --> <section class="hide-pdf"> <h3>Let's develop it!</h3> <ol> <li>Add doctype and html elements</li> <li>Add head and body elements within the html element</li> <li>Add a title and a metatag to the head</li> <li>Add a website heading and some content to the body</li> </ol> </section> <section> <h1>Bathroom Break?</h1> </section> <!-- Nesting--> <section> <h3>Nesting Elements</h3> <p>All elements "nest" inside one another</p> <img src = "images/owls.jpg"/> <p>Russian Nesting Dolls Rule: Whichever element OPENS first CLOSES last</p> </section> <!--example of nesting --> <section> <h3>Nesting: Example</h3> <p>Nested Elements</p> <pre><code class = "html"> <body> <h1>I'm a child of that body element right there</h1> <ul> <li>A list item inside an unordered list</li> <li>I'm a sibling of that first list item</li> <li>That unordered list element is my parent too!</li> </ul> </body> </code></pre> <p>Important Terms: Parent Element, Child Element, Sibling Element</p> </section> <!-- Elements --> <!-- Paragraphs--> <section> <h3>White space is only for humans!</h3> <div> <div class = "left" style = "width:50%"> <pre><code class = "html"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p> </code></pre> <pre><code class = "html"><p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </code></pre> <pre><code class = "html"><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p> </code></pre> </div> <div class="left-align" style="padding-left: 600px"> <h5>Same Output:</h5> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </div> <div class ="clear"></div> </div> </section> <section> <h3>Example: Paragraphs</h3> <p>Paragraphs allow you to format your content in a readable fashion.</p> <img src="images/example-paragraphs.png" alt="Example of Paragraphs in the wild" /> <p><small>* You can edit how paragraphs are displayed with CSS</small></p> </section> <!-- Headings--> <section> <h3>Element: Heading</h3> <div> <div class = "left" style = "width:50%"> <pre><code class = "html"><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6> </code></pre> </div> <div class = "right" style = "width:50%"> <h1 style = "font-size: 120%">Heading 1</h1> <h2 style = "font-size: 110%">Heading 2</h2> <h3 style = "font-size: 105%">Heading 3</h3> <h4 style = "font-size: 95%">Heading 4</h4> <h5 style = "font-size: 85%">Heading 5</h5> <h6 style = "font-size: 75%">Heading 6</h6> </div> <div class ="clear"></div> <p>* Heading number indicates hierarchy, not size. Think: Outlines from high school papers</p> </div> </section> <!--heading examples--> <section> <h3>Example: Headings</h3> <img src="images/example-headings.png" alt="Example of headings" /> </section> <!-- Em and Strong--> <section> <h3>Formatted text</h3> <div> <div class = "left" style = "width:50%"> <pre><code class="html"><p>Here is a paragraph with <em>Emphasized</em> text and <strong>Important</strong> text.</p> </code></pre> </div> <div class = "left left-align" style = "width:50%"> <p> Here is a paragraph with <em>Emphasized</em> text and <strong>Important</strong> text. </p> </div> <div class ="clear"></div> <br/> <br/> <small>* Notice: <em></em> and <strong></strong> are meant to indicate meaning through style. If you want to have text italicized or bold for appearance and not to communicate meaning, you should use CSS.</small> <br/> <br/> Furtner Reading</br><a href="http://html5doctor.com/i-b-em-strong-element/">http://html5doctor.com/i-b-em-strong-element/</a> </div> </section><!--develop it!--> <section class="hide-pdf"> <h3>Let's Develop it!</h3> <p class="left-align">Lets add the content from WomeninComputing.rtf document to our site</p> <ol style="padding-left: 25px;"> <li>Add Main Title as h1: child of body element</li> <li>Add each Section as section : siblings of Main Title</li> <li>Add section title as h2 within section element</li> <li>Add women's name as h3 after section title</li> <li>Add women's life span as h4 after women's name</li> <li>Add women's bio as p after women's life span</li> <li>Italicize and embolden random text within the paragraphs.</li> </ol> </section> <!-- Links--> <section> <h3>Element: Link</h3> <p>Links have three components</p> <ul> <li>Tag: <span class="code-ex"><a></a></span></li> <li><span class="code-ex">href</span> attribute</li> <li><span class="code-ex">title</span> attribute</li> </ul> <pre><code class = "html"><a href="http://www.girldevelopit.com" title="Girl Develop It Homepage">GDI</a> </code></pre> <p><a href="http://www.girldevelopit.com" title="Girl Develop It Homepage">GDI</a></p> <p>The <a> tag surrounds text or images to turn them into links</p> </section> <!-- Link Attributes --> <section> <h3>Additional Link Attributes</h3> <p>Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.</p> <pre><code class = "html"> <a href="home.html" target="_blank">Link Text</a> </code></pre> <p><small>Link opens in a new window/tab with <strong class="blue">target="_blank"</strong></small></p> <!-- Change email to fit your chapter's needs--> <pre><code class = "html"> <a href="mailto:info@girldevelopit.com">E-mail us!</a> </code></pre> <p><small>Link opens mail program by inserting <strong class="blue">mailto:</strong> directly before the email address.</small></p> </section> <!-- relative & absolute links --> <section> <section> <h3>Relative vs. Absolute paths for links & images</h3> <ul> <li> <strong class="blue">Relative</strong> <ul> <li>Typically used when pointing to a link within your own project or domain.</li> <li> <p>Relative paths change depending upon the page the link is on.</p> <ul> <li>Links within the same directory need no path information (e.g. <code class="blue">src="filename.jpg"</code>)</li> <li>Subdirectories are listed without preceding slashes (e.g. <code class="blue">src="images/filename.jpg"</code>)</li> </ul> </li> </ul> </li> </ul> <br/> <br/> <i class="fa fa-arrow-down"></i> </section> <section> <ul><li> <strong class="blue">Absolute</strong> <ul> <li>Typically used when pointing to a link that is not within your own domain.</li> <li>Absolute paths refer to a specific location of a file, including the domain <code class="blue">src="http://www.girldevelopit.com/chapters/detroit"</code></li> </ul> </li> </section> </section> <!-- Lets develop it--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p>Let's add links to our site!</p> <ol> <li>Add another html page called 'myWikiPage.html' (add some dummy content to the body)</li> <li>Add a <i>relative link</i> to your new wiki page!</li> <li>Add <i>absolute links</i> to the Famous Women wiki pages.</li> <li>Add <i>absolute links</i> to Organization home pages</li> <li>Add <i>absolute links</i> to Fun Fact links</li> </ol> </section> <!-- Lists--> <section> <h3>Element: Unordered and ordered lists</h3> <div> <div class = "left" style = "width:50%"> <pre><code class = "html"> <ul> <li>List Item</li> <li>AnotherList Item</li> </ul> </code></pre> <pre><code class = "html"> <ol> <li>List Item</li> <li>AnotherList Item</li> </ol> </code></pre> </div> <div class = "left" style = "width:50%"> <p>Unordered list (bullets) <ul> <li>List Item</li> <li>AnotherList Item</li> </ul> <br/> <br/> <p>Ordered list (sequence) <ol> <li>List Item</li> <li>AnotherList Item</li> </ol> </div> <div class ="clear"></div> </div> </section> <!-- example of lists --> <section> <h3>Lists: Examples</h3> <p>Lists can be used to organize any list of items.</p> <img src="images/example-lists.png" alt="Examples of lists"/> <p><small>You'd be surprised how often lists are used in web design.</small></p> </section> <!-- Develop it!--> <section class="hide-pdf"> <h3>Let's Develop it!</h3> <ol> <li>Add an <i>unordered list</i> with three text items: </li> </ol> <br/> <br/> <p>Famous Women, Organizations, and Fun Facts</p> <br/> <br/> <p>In a few minutes, we will make these list items links, that navigate <i>within</i> our main page.</p> </section> <section> <h3>Fragment Link Paths</h3> <p>A <span class="blue">URL fragment</span> is a name preceded by a hash mark (#), which specifies an internal target location (an ID) within the current document.</p> <pre><code class = "html"> <a href="#section2">Jump to Section Two</a> ... <div id="section2">Lorem ipsum...</div> </code></pre> </section> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p>Make the three list items in the nav bar link to the three sections of our page!</p> </section> <!-- Images--> <section> <h3>Element: Image</h3> <p>Images have three components</p> <ul> <li>Tag: <span class="code-ex"><img/></span></li> <li><span class="code-ex">src</span> attribute</li> <li><span class="code-ex">alt</span> attribute</li> </ul> <pre><code class = "html"><img src ="http://girldevelopit.com/assets/pink-logo.png" alt="Girl Develop It Logo"/><img src ="http://placekitten.com/g/350/100" alt="Placeholder Kitten"/> </code></pre> <img src ="http://girldevelopit.com/assets/pink-logo.png" alt="Girl Develop It Logo"/> <img src ="http://placekitten.com/g/350/50" alt="Placeholder Kitten Phot"/> <p><small>* Notice: This tag is our first example of a stand-alone or "self-closing" element.</small></p> </section> <!-- Line Break--> <!--section> <h3>Element: Line Break</h3> <div class = "left" style = "width:48%"> <pre><code class = "html"><p> Imagine there's no Heaven <br/> It's easy if you try <br/> No hell below us <br/> Above us only sky</p> </code></pre> </div> <div class = "left left-align"> <p> Imagine there's no Heaven <br/> It's easy if you try <br/> No hell below us <br/> Above us only sky </p> </div> <div class ="clear"></div> </section--> <!-- Develop it! --> <section> <h3>Let's Develop It!</h3> <p>Let's add some images to our page.</p> <ol> <li>Add an image of yourself after your name</li> <li>Add the images of the other famous women</li> <li>Add logo images as siblings of the link to the organization home page</li> </ol> <p>STRETCH GOAL: turn our images into links!</p> <ol> <li>Wrap an image element in a link element, so when you click on the image, it brings you to another page.</li> </ol> </section> <!--Comments--> <section> <h3>Comments</h3> <p>You can add comments to your code that will not be seen by the browser, but only visible when viewing the code.</p> <pre><code class = "html"><!-- Comment goes here --> </code></pre> <p><small>Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.</small></p> <pre><code class = "html"><!-- Beginning of header --> <div id="header">Header Content </div><!-- End of header --><!-- <ol> <li>List Item</li> <li>Another List Item</li> </ol>--> </code></pre> </section> <section> <h3>Tables</h3> <p>Tables are a way to represent complex information in a grid format.</p> <p>Tables are made up of rows and columns.</p> <div> <div class = "left" style = "width:50%"> <pre><code class = "html"><table> <tr> <th>Head</th> <th>Head</th> </tr> <tr> <td>Data</td> <td>Data</td> </tr></table> </code></pre> </div> <div class = "left left-align" style = "width:50%"> <table style="border: 1px solid"> <tr> <th style="border: 1px solid">Head</th> <th style="border: 1px solid">Head</th> </tr> <tr> <td style="border: 1px solid">Data</td> <td style="border: 1px solid">Data</td> </tr> </table> </div> <div class ="clear"></div> </div> </section> <!-- Table Examples --> <section> <h3>Tables: Examples</h3> <p>Tables can be styled with CSS to add zebra striping or to highlight important rows/columns.</p> <img src="images/example-tables.png" alt="Example of tables" /> </section> <!-- Character codes--> <section> <h3>Character codes</h3> <p>There are character codes for many different characters in many different languages</p> <div class="left" style="width:50%"> <ul> <li>Delta: &delta; δ</li> <li>Copyright symbol: &copy; ©</li> <li>Grave: &grave; `</li> <li>An grave a: &agrave; à</li> <li>A full list is available at <a href="http://character-code.com/" target="_blank">character-code.com</a></li> </ul> </div> <div class="right" style="width: 50%;"> <img src="images/example-characters.png" alt="Example of Characters"/> </div> </section> <!-- Question --> <section> <h2>Questions?</h2> <p>All slides are avaliable to download at <a href="https://github.com/smoyen/gdi-intro-html-css">github.com/smoyen/gdi-intro-html-css</a></p> <p><small>* Pro tip: Reading code is one of the best ways to learn how to code.</small></p> <h4>Resources</h4> <ul> <li>Helpful links: <ul style="font-size:28px"> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a></li> <li><a href="http://www.w3schools.com/tags/default.asp" target="_blank">http://www.w3schools.com/tags/default.asp</a></li> <li><a href="http://www.stackoverflow.com" target="_blank">http://www.stackoverflow.com</a></li> </ul> </li> <li><p><small>Google Tip: MDN (Mozilla Developer Network) is a great alternative to the W3Schools website. Append the letters MDN in front of your search to receive MDN specific results. Try it! Google "MDN html tags"</small></p></li> </ul> <!--div style = "font-size:1000%; height:100%; margin: 20% 0 10%;" class ="blue">?</div--> <div class ="clear"></div> <br/> <p class="hide-pdf"><i class="fa fa-arrow-circle-left"></i> <a href="index.html#/">Back to Slides Index</a></p> </section> </div> <footer> <div class="copyright"> HTML/CSS ~ Girl Develop It ~ <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a> </div> </footer> </div> <script src="reveal/lib/js/head.min.js"></script> <script src="reveal/js/reveal.min.js"></script> <script> // Full list of configuration options available here: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ controls: true, progress: true, history: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/none // Optional libraries used to extend on reveal.js dependencies: [ { src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'reveal/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, { src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); </script> </body></html>