1 / 158

Web Development

Web Development. Editors. https://www.sublimetext.com/ http://brackets.io/ Notepad or Notepad++. World Wide Web Consortium. https://www.w3.org/ The World wide Web Consortium (W3C) create standardised approaches to web development. This is very handy when testing.

tterri
Download Presentation

Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Development

  2. Editors • https://www.sublimetext.com/ • http://brackets.io/ • Notepad or Notepad++

  3. World Wide Web Consortium • https://www.w3.org/ • The World wide Web Consortium (W3C) create standardised approaches to web development. • This is very handy when testing.

  4. HTML (HyperText Markup Language) • HTML elements are represented by Tags. <!DOCTYPE html> (Specifies the language and version) <html> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p> <!-- this is a comment --> </body> </html>

  5. HTML (HyperText Markup Language) • HTML elements are represented by Tags. • <!–- Text goes here --> Defines a comment • <h1> to <h6> Defines HTML headings • <img> Defines an image • <p> Defines a paragraph • <br> Defines a single line break

  6. Site Map Books • Site maps show the required pages and detail how navigation between each page will work. Home Help and support About us

  7. HTML (HyperText Markup Language) • A HTML webpage may look something like this as a basic design.

  8. HTML (HyperText Markup Language) • Web browsers Parse the HTML turning it into a DOM Tree. • DOM (Document Object Model) • DOM trees contain several kinds of nodes, In particular a Document Type (<!DOCTYPE html>), Elements (<h1>) Text, Comments, and in some cases processing instructions

  9. HTML (HyperText Markup Language) • A DOM tree will look like this. • There are Elements that the HTML and DOM require.

  10. How scripts can change the DOM • JavaScript can change all the HTML elements in the page • JavaScript can change all the HTML attributes in the page • JavaScript can change all the CSS styles in the page • JavaScript can remove existing HTML elements and attributes • JavaScript can add new HTML elements and attributes • JavaScript can react to all existing HTML events in the page • JavaScript can create new HTML events in the page

  11. How scripts can change the DOM

  12. Box Model • Content - The content of the box, where text and images appear • Padding - Clears an area around the content. The padding is transparent • Border - A border that goes around the padding and content • Margin - Clears an area outside the border. The margin is transparent

  13. Design • http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF • Need to think about access to disability, W3C http://www.w3.org/WAI/intro/accessibility.php Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.

  14. Stacks • LAMP • WAMP • MAMP • XAMP • Install a stack for your current OS (get it to work) • Create a folder called test in C:\wamp\htdocs\ • Create a basic hello world index.html file • Run localhost\yourFolder\index.html

  15. HTML • Load a editor of your choice. Or you can use notepad. • Lets start to get a basic webpage going. • Call the file index.html • Make sure you keep good file management for this. • Images should have an image folder and CSS should go in to Styles folder.

  16. HTML <!DOCTYPE html> <html> <head> <title>Sample page</title> </head> • Where we put the title as “Sample page”. This will appear in browsers tab.

  17. HTML Links • We define links with an <a> </a> tag • We use them like this. <a href="url">link text</a> • If we was linking to different pages we use the directory of the folders we have created.

  18. HTML • Create a basic webpage that has 3 images of books with links to the relevant product pages. • Create a navigation system that will link the other pages • The 3 other pages • About • Products • Contact

  19. HTML form • HTML forms begin with: • <form> and end with </form> • Labels are defined by: • <label for “fieldname“>Your text</label> • Input text fields are defined by • <input type="text" id="ISBN" name="ISBN" />

  20. HTML form • A HTML form contains different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. <form>.form elements. .</form>

  21. HTML form <form> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value=""> <br> • Get this working for a last name input too.

  22. HTML form submit button <input type= "submit" value="Submit" name="submit"/>

  23. HTML form • We can also use Radio buttons in HTML <input type="radio" name="Gender" value="male"> Male<br> • Add 3 more radio buttons for Female, Other, and prefer not to say.

  24. HTML form • Drop down boxes are available too. <select name="cars"> <option value="volvo">Volvo</option> • Add 3 more elements to this.

  25. HTML form • We can also create text areas where users can input any text they like. <textarea name="message" style="width:200px; height:600px"> Insert text here </textarea> • We can change the size of the text area using CSS.

  26. Len

  27. Setting up the FTP • Lets set up FTP. • Download a FTP of choice. • Cyberduck or Filezilla. • Use the FTP login you have to connect to the server.

  28. Setting up the FTP • When you are connected make sure you either upload or recreate the folder structure on the server. • Index.html and other pages can stay free • Make sure everything else is in folders. • Images • CSS

  29. Images • Make sure images are optimized for the content and webpage your displaying. • A 1080p jpeg could be about 500 to 600 kb • A 4k image could be around 1,500 plus kb • Lets not waste time with loading.

  30. CSS • CSS is a language that describes the style of an HTML document. • CSS describes how HTML elements should be displayed. • In HTML 5 CSS is used for pretty much everything that will change the way the website looks.

  31. CSS CSS uses different syntax than html. We can use tags to identify parts of the HTML document we want to change with our CSS Comments are done with // and /* */ body {    background-color: find the hex code of your choice;}

  32. CSS • We can use Id’s to identify areas of html we want to alter. • We do this by using the id element and a div tag. • HTML we use it like this. <div id=“title”> • In CSS we can call this by using. .title { CSS goes here }

  33. CSS • We can change all aspects of font too. • Lets change a heading • Use div.heading .heading { color: white; text-align: center; text-decoration: underline; }

  34. CSS • In HTML, there are two main types of lists: • unordered lists (<ul>) - the list items are marked with bullets • ordered lists (<ol>) - the list items are marked with numbers or letters • The CSS list properties allow you to: • Set different list item markers for ordered lists • Set different list item markers for unordered lists • Set an image as the list item marker • Add background colors to lists and list items

  35. CSS list-style-type: Circle square upper-roman lower-roman

  36. CSS • In our index.html • Add a div.box • Add a <p> This is the box *6 • In CSS type this .box { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }

  37. CSS • The float property is used for positioning and layout on web pages. • The float property can have one of the following values: • left - The element floats to the left of its container • right- The element floats to the right of its container • none - The element does not float (will be displayed just where it occurs in the text). This is default • inherit - The element inherits the float value of its parent • Try this with your images. • In your CSS reference an img then use float: …;

  38. CSS • Lets add a side bar • Use div.aside .aside { height: 99%; width: 200px; position: fixed; z-index: 1; bottom: 0; right:0; background-color: #333; overflow-x: hidden; Mess around trying different positions and sizes

  39. Nav bar • Where we have our list of navigation pages in HTML lets make that look better. • Have a research and get a Nav bar working. • W3Schools is a good start

  40. Backgrounds • Add this to the Aside div background-image: url("./Images/lotus.png"); background-repeat: no-repeat; background-position: top; background-size: 600px; background-z-index: 1; background-position: relative;

  41. CSS • In your index.html make sure you have something like this. <header> <h1>Hello world!</h1> <p>Loremipsumdolor sit amet, consecteturadipisicingelit. Essedolorumenimrecusandaetemporibusvoluptatesearumlaborumsimiliquedolor rem nemo nostrum minima blanditiis, voluptasundeexpeditaaperiam quos! Aliquid, quam. </p> </header>

  42. CSS • Now in your CSS file lets add a lot of the elements we have done together. html { height: 100%; overflow: hidden; }

  43. CSS body{ color: #fff; margin: 0; padding: 0; perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; font-family: "Luna"; }

  44. CSS header { box-sizing: border-box; min-height: 100vh; padding: 30vw 0 5vw; position: relative; transform-style: inherit; width: 100vw; }

  45. CSS header h1{ margin-top: -100px; } header, header:before { background: 50% 50% / cover; }

  46. CSS header::before{ bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; display: block; background-image: url(tree.jpg); background-size: cover; transform-origin: center center 0; transform: translateZ(-1px) scale(2); z-index: -1; min-height: 100vh; }

  47. CSS header *{ font-weight: normal; letter-spacing: 0.2em; text-align: center; margin:0; padding: 1em 0; }

  48. Zen Garden • http://www.csszengarden.com/

  49. CSS • Get making your website look good.

  50. Responsive Design • Responsive web design is where content automatically adjusts to the screen size of the device.

More Related