!DOCTYPE: An Introduction to Coding

• karoelisa22

Websites are driven by three core technologies and languages

  • HTML
  • CSS
  • Javascript
  • You should understand all three of these

HTML

  • HyperText Markup Language
  • Standard language used to describe the content and structure of a website
  • Understood and interpreted by a web browser
    • Code is rendered by a browser to create a website we can interact with
  • HTML 5 was released in 2014, newest version
    • Continually being updated, but it does not become obsolete
  • What is it?
    • Plain text semantic language
      • No binary or weird stuff
    • Made up of tags in angle brackets <html>
    • Tags are used to define different web page elements
    • Terms
      • Tag: <title>
      • Content: My Website
      • Element: <title> My Website </title>
      • Nesting: Placing elements within elements
  • Common tags
    • <p> Paragraph
    • <a> Link
    • <img> Image
    • <header> Header

CSS

  • Cascading Style Sheets
  • CSS describes the visual properties or ‘style of HTML content
    • Layout, colour, font, etc.
  • CSS uses rules to describe the style of different HTML elements
    • <header> Header </header>
    • Header {font: Comic Sans}
      • Selecter: header
      • Property: font
      • Value: Comic Sans
  • Makes changing the appearance of a large amount of HTML content easy
  • Rules live here
    • Styles.css
  • Structure lives here
    • Index.html
    • About.html
    • Contact.html
    • Portfolio.html
    • Links.html
  • CSS isn’t a thing on its own, it exists for HTML

Right Tools

  • You can start designing and developing web sites using nothing more than a simple text editor and a web browser in which to preview them

Mac Textedit

  • Preferences
    • Plain text
    • Unclick correct spelling automatically
      • Will break code
    • Unclick smart quotes
    • HTML as html and not formatted code

The Basics

  • Boilerplate HTML
    • Create an HTML Element
    • Create a head element
      • Different from header
    • Create a body element

<html>

  • <head> </head>
  • <body> </body>

</html>

  • Head
    • The user does not see this
  • Body
    • The user sees this
  • Saving
    • Safe as .html, otherwise it’s just text

Headings:

  • H1-h6
  • There is a text hierarchy with headers
  • If you do not tell the browser what to do, it will make decisions with its own built-in stylesheet

Head Element

  • Really important
  • Google uses this to search
  • The title appears in the tab at the top

CSS

  • Usually in a different file
  • Can go into the header so that you don’t see it
    • Simply informs the appearance
  • AMERICAN colour for CSS
  • Colour in CSS
    • RGB
      • 0-255
    • HEX Code
      • Different ways of expressing RGB
    • Named colour
      • 147 named colours
  • Fonts in CSS
    • Always have a backup default font

Images

  • Three main files
    • Jpeg
    • Png
    • Gif
  • Need to think about the file size
    • The files might not load
    • Files need to be compressed

Elements

  • Block elements take up an entire width of the browser
  • An inline element only takes up as much space as it needs
    • Images sit next to text

Day One Files:

Index.html

About.html

Styles.css

  • body {
    • background-color: #ddf8ff;
    • }
  • h1 {
    • color: papayawhip;
    • }
  • h2 {
    • color: rgb(66, 244, 220);
    • font-size:48px;
    • text-align: center;
    • font-family: Arial;
    • }
  • p {
    • color: #eff759;
    • font-size: 68px;
    • text-align:right;
    • font-family: Master of Break, Impact, sans-serif;
    • }
  • img {
    • width:200%
    • height: 200%
    • }

Leave a comment