Showing posts with label code editing. Show all posts
Showing posts with label code editing. Show all posts

Tuesday, 8 September 2015

Video embedding

It is simple to add a video to your page. There are just three things required to embed a video from a player like Youtube or Vimeo into a HTML webpage.

  • The HTML file you want to insert a video to 
  • An idea of the size you want the video to be
  • Access to the video online

Find the share button on Youtube, then the embed button. Copy the <iframe> code and paste it into your HTML document. The same steps are applied if the video is from another website, like Vimeo. Find the share and embed button and the <iframe code> - Paste into HTML document.

Simple Menu

Menus are a common form of navigation for a webpage. The menu shows the main links that are accessible from the website. It is simply a list of links.

CSS is helpful for creating a menu that is pleasing to the eye. In CSS, styles can be applied to basic HTML lists. Floats and margins can change the positioning of list items. Vertical and horizontal lists/menus are easily created in CSS with different selectors.

HTML Links


  • Links on webpages allow users to click from one page to another
  • Link pages together 
  • HTML links are called Hyperlinks 
  • A Hyperlink is a text or an image that you can click on that will take you to a different page. 
  • In HTML, links are defined by the <a> tag 
      <a href="url">This is a link</a>
  • The 'href' attribute specifies the link address/location 
  • Attributes are used to provide additional information about the element 
  • The link text is the only visible part of the link
  • This can be text or an image, or any other HTML element 
     When you hover over a link, two things will usually happen:
  • The cursor will change to a small hand
  • The colour of the link element will change 
     By default links will appear as:
  • Unvisited - Underline & Blue
  • Visited - Underline & Purple
  • Active - Underline & Red

Markup Structure

HTML - Hyper Text Markup Language
A markup structure is a way to determine how to turn a visual design into a code design.
HTML codes are added to text, in a way that defines each section of text and tells it how to look on a webpage. It adds a structure to the text.

HTML is mainly divided into two sections: The <head> section and the <body> section 
Inside the head section is the document declaration. This tells us what type of html you are using and ensures the code is rendered correctly. The body section contains everything able to be seen on the webpage. 


How to turn a visual design for a website into a code design:
  • The first step is to use a div map (teacher's terminology) to divide the page into rectangles/div boxes to indicate the page layout and work how the code structure will be created.
  • Ensure the rectangles are complete and don't overlap. 
  • Rectangles can be nested inside one another. 
  • Write down appropriate tag names for each element of the design. 
  • Use the div map as a guide for creating your own website. 
We practiced this in class with a preset design, and we also designed our own template using adobe illustrator, then made a div map and used it as a guide to write an appropriate code.


CSS


Controlling the presentation elements of HTML becomes a lot easier with the use of another coding software by the name of CSS - Cascading Style Sheets
HTML is used to structure the content. CSS is used for formatting/styling that structured content.
Instead of creating different style tags in HTML for every single element on every single page, CSS universally cascades styles across a whole HTML document or set of pages.

      
      With CSS you can:
  • Change font color and style 
  • Change dimensions of objects (<img> and <div>)
  • Add margins and padding
  • Position and float objects 
  • Change the colours of objects, text, links etc 
  • Control how links look and behave 
  • Control how images look
  • Make gradients, drop shadows 
  • Make rounded corners and other basic special effects 
  • Control the layout of many different pages from one single style sheet
  • You have more precise control of the layout compared to HTML

Thursday, 3 September 2015

HTML Intro

I began this class with no experience of HTML or code editing. I’m looking forward to the learning experience :-)

HTML is a system for tagging elements inside a document so a browser knows what to do with it. 
A simple piece of code may be laid out like this :  <tagname>content</tagname>
  • HTML stands for Hyper Text Markup Language 
  • In our class for Web Media we use the code editor Adobe Dreamweaver. 
  • The idea behind HTML is to take a piece of text and manipulate it by wrapping it in tags. 
  • Each tag describes the portion of text it’s wrapping around. 
  • There are many different tags to learn. Each one adds a different effect to your webpage. 
  • Tags normally come in pairs <p> </p>
  • Each tag begins with < > and ends with </ > (Forward slash indicates closing tag) 
Web browsers interpret HTML documents and display them. The browser wont show the tags, it uses them to determine how the HTML content is shown. 

In class we have learnt some basic tags

- <h1>, <h2>, <h3> - Continues to <h6> - Heading tags, size varies according to level of importance.
- <p> - Paragraph tag
- <strong> - Bold text
- <em> - Italics
- <img> - Image
- <a> - Anchor - For links
- <title> - Page name