IGEM Wiki Workshop 11/05/2017.

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
HTML for Beginners An IEEE/ACM Presentation given by Hamilton Turner.
Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.
Web Program Development1 February 23, 2011 HTML Web Page Development Debbie Bartlett February 23, 2011.
CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
Basics of HTML.
Creating Tables in a Web Site Using an External Style Sheet
HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
The Characteristics of CSS
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
1 Essential HTML coding By Fadi Safieddine (Week 2)
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Website Development with Dreamweaver
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
Designing Web Sites Using “tags” Tags are codes inserted among the text to tell the text how to behave Their format is very rigid; they always look like.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.
Going Live with a Basic Web Page Bill Hart-Davidson AIM: billhd30 pfworkshop.
Just Enough HTML How to Create Basic HTML Documents.
HTML Basic IST2101. Keep In Mind Programming can be time consuming. Plan ahead!
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
HTML Lesson 2. Review Questions  What are HTML tags used for?  What do HTML tags look like?  What are the 3 required HTML tags?  In what section of.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
HTML BASIC IST 210: Organization of Data IST210 1.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
Spiderman ©Marvel Comics Creating Web Pages (part 1)
External Style Sheets Exploring Computer Science – Lesson 3-6.
Introduction to Web Authoring Ellen Cushman /wra210.htm Class mtg. #2.
Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
HTML Basic IST 210: Organization of Data IST2101.
What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,
Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.
Week 1: Introduction to HTML and Web Design
Basic concepts of web design
INTRO TO WEB DEVELOPMENT html
CSS Nick Sims.
HTML – The COMPUTING UNLOCKED GUIDE
Bare boned notes.
With Microsoft FrontPage 2000
Uppingham Community College
Key concepts of Computing
HTML and Website Development
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Web Programming– UFCFB Lecture 11
What are Cascading Stylesheets (CSS)?
HTML Structure.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Computer communications
HTML – The COMPUTING UNLOCKED GUIDE
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Web Programming and Design
One Set of Styles Connected to As Many Pages as You Want!!!
Presentation transcript:

iGEM Wiki Workshop 11/05/2017

Overview Importance of the wiki Some good wiki examples Using the wiki Basic HTML About bootstrap DIY Picking themes

The Wiki Record all information about the project on it – main source of information for judges about the project Required pages include: project overview, team page, experimental design, results, parts, medal checklist, diary/notebook, lab book, team attributions… http://2017.igem.org/Team:Newcastle/wiki_information

The Wiki - What needs to be done now? The wiki needs to be started now Keep a record of: emails, people spoken to, meetings, ideas, etc. Also take pictures of this stuff for proof Write up any protocols you use and keep a good lab-book (a ‘lab-book’ is needed for modelling stuff too) Basically write up everything ASAP after it has happened and get it on the wiki

Wiki examples

Using the wiki Create a new page by searching for it Click ‘edit this page’ to start coding

Using the wiki Edit existing pages using the grey bar at the top: You can also use ‘View’ to look at other team’s code

Using the wiki Upload images also from the grey bar: PDF files, word documents, presentations, etc. are uploaded in the same way; just give them the correct extension! Compulsory image naming scheme: T--Newcastle--FILENAME.ext e.g.: T--Newcastle--Logo.png

HTML – Overview <tag attribute=“”></tag> Widely used in web development Can be coded in any text editor – suggest notepad++ (or directly onto the wiki) HTML uses tags abundantly Tags can have attributes which defines something about the content between the tags <tag attribute=“”></tag> Note: start all of your wiki pages with {{Newcastle2}} before the <html> tag – this sets up an empty page without annoying wiki pre-formatting <html> lets the browser know you are talking in HTML The <head> section is normally used for linking to stylesheets, setting the web page title, and other meta data The content of your webpage goes in the <body> section </html>

HTML –Writing and formatting text Text goes between the <body> tags Different types of text: Use <h> tags with a number for headings – higher number = smaller text Use <p> tags for ‘normal’ text

HTML –Writing and formatting text Text can be made bold, italicised, underlined and coloured: Note that it is color, not colour! HTML always uses American spelling, e.g. center not centre Inline styling is the same as CSS, which is essentially what bootstrap is! Other formatting, inserting images and more HTML is on the workshop sheet

Bootstrap Provides a style template for a website Generally includes: a stylesheet, scripts, and a page layout template Stylesheet: pre-styles text, tables, etc. E.g. all text in <h1> tags is in Arial font, bold and dark blue Scripts: used to make a webpage more functional E.g. image carousels Page layout template: general layout for the webpage:

Make a wiki page http://2017.igem.org/wiki/images/a/a2/T--Newcastle--wiki_worksheet.pdf