You're about to create your best presentation ever

Html Css Javascript Presentation Template

Create your presentation by reusing one of our great community templates.

HTML/CSS Presentation

Transcript: The Languages of Websites HTML & CSS Intro HyperText Markup Language HyperText In reference to the links which connect websites to one another These links can be within a singular website Markup Includes images, gifs, and other content on a website A category of Computer Languages which focuses on text Language How you communicate with your computer to make a website What are some parts which make up this page? What do you see on page? Elements are Parts of a Webpage All elements are represented by tags <h1>A kiwi is not only a fruit but an animal</h1> Opening Tag Closing Tag Content Changes the behavior of the tag and adds more info Attributes extend tags <h1 alt="kiwi">A kiwi is not only a fruit but an animal</h1> name = value Structure of a Website John Doe Contact About Portfolio Header & Navigation Image Section Head <!DOCTYPE html> <html lang="en"> <head> <title>Profile Page</title> <meta charset="utf-8"> <!--Defines character set (keyboard)--> <link rel="stylesheet" type='text/css' href="css/style.css" /> </head> <body> <header> </header> <section><section> </body> </html> An element which provides basic info on the document itself. <head> <title>HTML/CSS Presentat</title> Shows up in the tab <meta> HTML metadata is data about the HTML document <link/> Connects external resources to current document All these elements within the head will NOT be display on the website <!DOCTYPE html> Lets you know what HTML version code is written in What You Have So Far... Header <header> <h1>Basic Website</h1> <nav> <ul> <li> <a href="portfolio.html">Portfolio</a> </li> <li> <a href="about.html">About</a> </li> <li> <a href="contact.html">Contact</a> </li> </ul> </nav> <header> Represents introductionary content, contains navigation and intro backing <header> <header> Navigation, unorderlist, and list items will go here. </header> Opening Tag Closing Tag Use as a heading. This element is defined as the most important heading thus it makes the text the biggest in size. <h6> is least important so smaller in size. <h1> <header> <h1>Write what you like</h1> </header> Which one is bigger or more important? <h2></h2> or <h4></h4> <h5></h5> or <h1></h1> Where all your navigation links are stored. <nav> <header> <h1>Basic Website</h1> <nav> Unorder list and list items will go here... </nav> <header> <ul> or unordered list has a bullet point for each list item. The <li> or list item is a singular item within such list. <ul> and <li> have a parent-child relationship. <ul> is the parent to <li> which is the child. <ul> and <li> <nav> <ul> <li>Profile</li> <li>About</li> <li>Contact</li> </ul> </nav> Parent Child Anchor element makes a hyperlink to other websites or pages within a website <a> <li><a href="https://www.instagram.com" target="_blank">Portfolio</a></li> Href is an attribute which shows where the link's destination is. You can put a url to link to any page you like. What You Have So Far... Basic Website Portfolio About Contact How HTML is displayed on the screen. Color, format, and many other design aspects are coded within a CSS page. Cascading Style Sheets (CSS) h1 { color: purple; } Value Property Selector Id An attribute to selecting one single element to style Id and Class Class An attribute to select multiple elements to style in a similar fashion #id { color: blue; } .class { color: blue; } What's the difference? CSS Box Model Content Padding Space in between the border Margin Space between everything else on page *Green line is border Block Elements: takes up the entire space of the container (or parent element) Block vs. Inline Elements Which one is inline and which one is block? thunderbird beauty school dropout Inline Elements: takes up only the space of itself font-family: 'Open Sans', sans-serif; To change the font of the text List of CSS properties font-size: 20px; Makes the text size bigger list-style-type: none; Try with ul and see what happens float: right; shifts elements either to the left or right of container text-align: center; How to align text. Values include left, right, & justify List of CSS properties text-decoration: none; Removes underlines. Values include... line-through, overline, and underline width: 100%; Element will take up entire container float: right; shifts elements either to the left or right of container header { width: 100%; /* Using precents, determine the width of the element */ } h1 { float: left; /* shifted element to left side of container */ font-family: 'Montserrat', sans-serif; } nav { float: right; } ul { list-style-type: none; /* removes all bullets */ } li { float: left; /* tells if content should go left of container */ } li a { display: block; // sets element to takes up entire space of container text-align: center; padding: 10px; font-size: 20px; text-decoration: none; // removes underline font-family: 'Montserrat', sans-serif; } a:hover { // @media CSS rule text-decoration: line-through; // can use overline or underline } What You Have So Far... Basic Website

HTML, CSS, Javascript

Transcript: An ID must be unique on a page. It is meant to be more specific than a class. A class can be used multiple times on a page. An element can have both an ID and class. An element can have multiple classes (separated with spaces), but can have only one ID. Scripting language for your web page that is executed client-side in the web browser or server side using something like Node.js JavaScript can be used to validate data entered into a form, provide drag and drop functionality, change styles on the fly, animate elements ... <a href="https://www.google.com">Google</a> Most elements will inherit many style properties from their parent elements by default. For example, in your CSS body { font-family: "Times New Roman", Georgia, Serif; } Then in your HTML <body> <p>This is my paragraph text</p> </body> The font used in the <p> (paragraph) uses the same font as the body. p Type (element) # ID . class HTML <head></head> Presentation layer. Defines styles (such as colors) Mobile traffic continues to increase Using Bootstrap ready made classes, you can specify how many spots in the grid system you want each column to occupy When there are designers and developers working on a project, using a CSS framework provides consistency Page output remains the same across different web browsers CSS Rule A dynamic language Can react to events Validate data Create cookies Detect visitor's browser Read/write/modify HTML elements Objects: Anything can be - windows, documents, images, tables, forms, buttons, links, etc. Objects have properties that act as modifiers. JSON: JavaScript Object Notation https://getbootstrap.com/ JavaScript Simple Example Pick and choose the features you want to use, discard what you don't Bootstrap customize page for custom version The <head> element contains special elements that instruct the browser where to find stylesheets, provide meta info and more. "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web." The doctype is not actually a tag Structure (HTML) Style (CSS) Behavior (JavaScript) body CSS Inheritance http://foundation.zurb.com/ <p>This is where some text will be</p> http://semantic-ui.com/ <script src="/js/jquery.js"></script> <script src="/js/myapp.js"></script> document is the object, write is the method Bootstrap Attribute HTML ul <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Plain Template</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html> The Behavior CSS Weekly https://css-weekly.com Javascript Weekly https://javascriptweekly.com Responsive Design Weekly http://responsivedesignweekly.com Web Design Weekly https://web-design-weekly.com Frontend Focus https://frontendfoc.us Website Magazine https://www.websitemagazine.com Adds interactivity <div id="nav-bar"> . . . </div> <p id="primary" class="right uppercase noprint">Example with id and multiple classes on an element</p> <div class="noprint">A class can be used multiple times on one page</div> Class Selectors - Referenced with a period . <tag attribute="property">content</tag> Customizable CSS Hypertext Markup Language The declaration contains at last one property/value pair. Three layers of a web page Why Use a CSS Framework such as Bootstrap Nested Elements and the DOM h1 Note: When using a CDN, use the link & script tags recommended by Bootstrap that include integrity and crossorigin properties. Those were removed from above to simplify what is shown to pull in Bootstrap components from a CDN Finding HTML Elements Examples <!DOCTYPE html> Consistency <body> <h1>Heading</h1> <p>Paragraph text</p> <ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </body> <h1>My Main Headline</h1> Using Separate JavaScript File <html></html> HTML + CSS + JavaScript = Front End Foundation Describes the content to the browser <input type="text" name="first_name" /> CSS body { font-family: Arial; } p { color: #777777; font-size: 18px; } h1, h2, h3, h4 { font-weight: bold } The <html> element defines the whole HTML document JavaScript Essentials selector { property: value; } Start tag Basic HTML page structure https://getbootstrap.com Popular Front-End Frameworks HTML 5 - common layout Aaron Rodden CSS #sidebar .author { font-size: 12px; color: red; } The doctype above declares HTML 5 The <body> elements contains the document content (what is shown inside the browser window) JavaScript <!DOCTYPE html> <html> <head><title>Simple Javascript</title>

Now you can make any subject more engaging and memorable