Chapter6: Bootstrap 3. Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL
|
|
|
- Shana Norton
- 5 years ago
- Views:
Transcription
1 Chapter6: Bootstrap 3 Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL
2 Objective To apply Bootstrap to a web site To know how to build various bootstrap commands to be a content
3 Topics Bootstrap Installation Typography Grid system Tables Thumbnails Jumbotron Badges Dropdown menus Input Carousel
4 What is Bootstrap Bootstrap is a group of design template for webpage creation. Easily manipulate display contents on different devices (tablet, mobile, desktop) Bootstrap consists modified CSS, JavaScript and HTML. Bootstrap introduce by Mark Otto and Jacob Thornto at Twitter. Open-source
5
6
7
8
9
10 Installation Download bootstrap from getbootstrap.com
11 Installation: extraction file After file is extracted, we have get three folders in bootstrap dist
12 Installation: call Bootstrap <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>bootstrap 101 Template</title> <link href= css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>hello, world!</h1> <script src="jquery/jquery min.js"></script> <script src= js/bootstrap.min.js"></script> </body> </html>
13 Installation: request jquery What is jquery? Client-side JavaScript library jquery uses for navigate document, DOM, event handling, and AJAX
14 Installation: download jquery Put the file in /jquery/
15 Typography Header Small by header Highlight Quote message <h1> <h6> <small> <mark> Keyboard shortcut <kbd> Text color <blockquote> class= text-info.text-muted.text-primary.text-success.text-info.text-warning.text-danger
16 Example <h1>สว สด <small> สว สด </small> </h1> <h3 class="text-danger">sawadee<small> sawadee </small> </h3> <p> ทดสอบ<mark>ภาษาไทย </mark> </p> <blockquote> Thailand is a country on Southeast Asia s Indochina peninsula known for tropical beaches, opulent royal palaces, ancient ruins and ornate temples displaying figures of Buddha, a revered symbol. In Bangkok, the capital, an ultramodern cityscape rises next to quiet canal and riverside communities. Commercial hubs such as Chinatown consist of labyrinthine alleys crammed with shop houses, markets and diners. <footer> from </footer> </blockquote> <p> Copy texts presses <kbd> CTRL+C </kbd> </p>
17
18 Grid System Display web page on different devices has a problem, using grid class being answer. Grid class sets for four kinds of display xs for phone xm for tables md for desktop lg for large desktop
19 Grid System: row & column column row <div class= row > <div class= col-md-1 > aa </div> <div class= col-md-1 > bb </div> </div>
20 Example <div class="row"> <div class="col-md-1" style="background-color:lavender;"> aa </div> <div class="col-md-1" style="background-color:pink;"> bb </div> <div class="col-md-4" style="background-color:lavender;"> cc </div> <div class="col-md-4" style="background-color:green;"> dd </div> </div>
21 Tablet Mobile
22 Example: mobile display <div class="row"> <div class="col-xs-1" style="background-color:lavender;"> aa </div> <div class="col-xs-1" style="background-color:pink;"> bb </div> <div class="col-xs-4" style="background-color:lavender;"> cc </div> <div class="col-xs-4" style="background-color:green;"> dd </div> </div>
23 Tablet Mobile
24 Tables Table style.table.table-striped.table-bordered.table-hover.table-condensed Row colors <tr class= > success info warning danger
25 <table class="table"> <thead> <th> Id </th> <th> </th> </thead> Example <tbody> <tr> </tr> </tbody> </table> <td> 12345</td> <td>
26
27 Thumbnails Image shapes.img-rounded.img-circle.img-thumbnail
28 Example <img src="picture.jpg" class="img-circle" width="200"> <img src="picture.jpg" class="img-rounded" width="200">
29 <table class="table"> <thead> <th> image </th> <th> </th> </thead> Example <tbody> <tr> <td> <img src="picture.jpg" class="img-circle" width="200"> </td> <td> </tr> <tr> <td> <img src="picture.jpg" class="img-circle" width="200"> </td> <td> </tr> </tbody> </table>
30
31 Jumbotron Jabotron is information banner presenting on a gray box with rounded corners. Example: <div class=container> <div class="jumbotron"> <h1>สว สด </h1> </div> </div> <p> ขอตอนร บเข าส ว ชาน </p>
32
33 Badges Badges are numerical indicator on label shows number of item in a link Example: <div class=container> <div class="jumbotron"> <h1>สว สด <span class="badge">13</span></h1> <p> ขอตอนร บเข าส ว ชาน </p> </div> <a href="#">friends <span class="badge">14</span></a><br> <a href="#">powers <span class="badge">56</span></a><br> <img src="picture.jpg" class="img-circle" width="200"> <span class="badge"> 56</span> </div>
34
35 Class in dropdown.dropdown.dropdown-header.dropdown-toggle.caret Dropdown menu
36 Example <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Thai University <span class="badge">3</span> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href=" <li><a href=" <li><a href=" </ul> </div>
37 Input Bootstrap apply five inputs.form-group Input <input type = text, password >.formcontrol Textarea Select list <textarea class= form-control > <select>.. <option> xx </option> </select>.checkbox Checkbox <input type= checkbok > Checkbox inline.checkbox-inline.radio.radio.radio disable
38 <div class="form-group"> <label>name:</label> <input type="text" class="form-control" id="usr"> Example <label>password:</label> <input type="password" class="form-control" id="pwd"> <label>message:</label> <textarea class="form-control" rows="5" id="comment"></textarea> <label>select:</label> <div class="checkbox"> <label><input type="checkbox" value="">option 1</label> <label><input type="checkbox" value="">option 2</label> </div> </div>
39
40 <br/> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-4"> Example <div class="form-group"> <label>name:</label> <input type="text" class="form-control" id="usr"> <label>password:</label> <input type="password" class="form-control" id="pwd"> <label>message:</label> <textarea class="form-control" rows="5" id="comment"></textarea> <label>select:</label> <div class="checkbox"> <label><input type="checkbox" value="">option 1</label> <label><input type="checkbox" value="">option 2</label> </div> </div> </div> </div>
41 <div class="radio"> <label><input type="radio" name="optradio">option 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio">option 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled>option 3</label> </div> <div class="form-group"> <label for="sel1">select list:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> Add more code from previous example
42 Carousel Carousal is slideshow creation from JavaScript
43 <div class="container"> <div id="mycarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="picture.jpg" width="400"> <div class="carousel-caption"> <h3>htext</h3> <p>description</p> </div> </div> <div class="item"> <img src="picture2.jpg" width="400"> <div class="carousel-caption"> <h3>htext</h3> <p>description</p> </div> </div> </div> </div></div>
44 Add more style <style>.carousel-inner >.item > img,.carousel-inner >.item > a > img { width: 40%; margin: auto; } </style>
45
46 Reference
http://getbootstrap.com/ Bootstrap 1/20 MaxCDN Mateen Eslamy 10/31/13
Mateen Eslamy 10/31/13 Tutorial In this tutorial, you ll learn how to create a webpage using Twitter Bootstrap 3. The goal of this tutorial is to create a responsive webpage, meaning that if the webpage
Building beautiful websites with Bootstrap: A case study. by Michael Kennedy michaelckennedy.net
Building beautiful websites with Bootstrap: A case study by Michael Kennedy DevelopMentor @mkennedy michaelckennedy.net Objectives Learn what Bootstrap has to offer web developers Install and use Bootstrap
Create First Web Page With Bootstrap
Bootstrap : Responsive Design Create First Web Page With Bootstrap 1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. 2. Bootstrap 3 is mobile-first
Front-End UI: Bootstrap
Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com
Bootstrap Carousel Tutorial
Bootstrap Carousel Tutorial The Bootstrap carousel is a flexible, responsive way to add a slider to your site. Bootstrap carousel can be used in to show case images, display testimonials, display videos,
Session 5. Web Page Generation. Reading & Reference
Session 5 Web Page Generation 1 Reading Reading & Reference https://en.wikipedia.org/wiki/responsive_web_design https://www.w3schools.com/css/css_rwd_viewport.asp https://en.wikipedia.org/wiki/web_template_system
Bootstrap Carousel. jquery Image Sliders
Bootstrap Carousel jquery Image Sliders Bootstrap Carousel Carousel bootstarp css js jquery js bootstrap.js http://getbootstrap.com/javascript/#carousel item ol.carousel-indicators li
This project will use an API from to retrieve a list of movie posters to display on screen.
Getting Started 1. Go to http://quickdojo.com 2. Click this: Project Part 1 (of 2) - Movie Poster Lookup Time to put what you ve learned to action. This is a NEW piece of HTML, so start quickdojo with
CSC Web Technologies, Spring HTML Review
CSC 342 - Web Technologies, Spring 2017 HTML Review HTML elements content : is an opening tag : is a closing tag element: is the name of the element attribute:
Where s My Cat? <title>where's My Cat?</title> </head> <body> <h1 class="where">where's MY CAT?</h1>
Where s My Cat? HTML
Web Programming BootStrap Unit Exercises
Web Programming BootStrap Unit Exercises Start with the Notes packet. That packet will tell you which problems to do when. 1. Which line(s) are green? 2. Which line(s) are in italics? 3. In the space below
ADVANCED JAVASCRIPT #8
ADVANCED JAVASCRIPT #8 8.1 Review JS 3 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15;
Programming web design MICHAEL BERNSTEIN CS 247
Programming web design MICHAEL BERNSTEIN CS 247 Today: how do I make it?! All designers need a medium. Napkin sketches aren t enough.! This week: core concepts for implementing designs on the web! Grids!
For instructions to change the logo, please refer to: ore
Header Note: VapeDay Theme have 2 versions. Version 1.0 with Left bar for long list of categories and Version 2.0 with No Left bar with categories in the header. While editing the theme files from template
Responsive Web Design and Bootstrap MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University
Responsive Web Design and Bootstrap MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University Exam 3 (FINAL) Date: 12/06/18 four weeks from now! JavaScript, jquery, Bootstrap,
Last class we looked at HTML5.
ADVANCED HTML5. #2 2.1 Recap 2 3 Last class we looked at HTML5. headings There are 6 levels available, ranging from h1 to h6. paragraphs links
NukaCode - Front End - Bootstrap Documentation
Nuka - Front End - Bootstrap Documentation Release 1.0.0 stygian July 04, 2015 Contents 1 Badges 3 1.1 Links................................................... 3 1.2 Installation................................................
HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS
MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version
The Structure of the Web. Jim and Matthew
The Structure of the Web Jim and Matthew Workshop Structure 1. 2. 3. 4. 5. 6. 7. What is a browser? HTML CSS Javascript LUNCH Clients and Servers (creating a live website) Build your Own Website Workshop
Structure Bars. Tag Bar
C H E A T S H E E T / / F L A R E 2 0 1 8 Structure Bars The XML Editor provides structure bars above and to the left of the content area in order to provide a visual display of the topic tags and structure.
Project Part 2 (of 2) - Movie Poster And Actor! - Lookup
Getting Started 1. Go to http://quickdojo.com 2. Click this: Project Part 2 (of 2) - Movie Poster And Actor! - Lookup This is an extension of what you did the last time (the Movie Poster lookup from Week
Creating Web Pages Using HTML
Creating Web Pages Using HTML HTML Commands Commands are called tags Each tag is surrounded by Some tags need ending tags containing / Tags are not case sensitive, but for future compatibility, use
ADVANCED JAVASCRIPT. #7
ADVANCED JAVASCRIPT. #7 7.1 Review JS 3 A simple javascript functions is alert(). It's a good way to test a script is working. It brings up a browser default popup alert window. alert(5); 4 There are 2
Understanding this structure is pretty straightforward, but nonetheless crucial to working with HTML, CSS, and JavaScript.
Extra notes - Markup Languages Dr Nick Hayward HTML - DOM Intro A brief introduction to HTML's document object model, or DOM. Contents Intro What is DOM? Some useful elements DOM basics - an example References
Summary 4/5. (contains info about the html)
Summary Tag Info Version Attributes Comment 4/5
Programming of web-based systems Introduction to HTML5
Programming of web-based systems Introduction to HTML5 Agenda 1. HTML5 as XML 2. Basic body elements 3. Text formatting and blocks 4. Tables 5. File paths 6. Head elements 7. Layout elements 8. Entities
Working Bootstrap Contact form with PHP and AJAX
Working Bootstrap Contact form with PHP and AJAX Tutorial by Ondrej Svestka Bootstrapious.com Today I would like to show you how to easily build a working contact form using Boostrap framework and AJAX
A website is a way to present your content to the world, using HTML to present that content and make it look good
What is a website? A website is a way to present your content to the world, using HTML to present that content and make it look good HTML: What is it? HTML stands for Hyper Text Markup Language An HTML
HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that define how
Website Development with HTML5, CSS and Bootstrap
Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on
Web Technologies - by G. Sreenivasulu Handout - 1 UNIT - I
INTRODUCTION: UNIT - I HTML stands for Hyper Text Markup Language.HTML is a language for describing web pages.html is a language for describing web pages.html instructions divide the text of a document
SilkTest 2009 R2. Rules for Object Recognition
SilkTest 2009 R2 Rules for Object Recognition Borland Software Corporation 4 Hutton Centre Dr., Suite 900 Santa Ana, CA 92707 Copyright 2009 Micro Focus (IP) Limited. Rights Reserved. SilkTest contains
For instructions to change the logo, please refer to:
Header Top: Logo:- For instructions to change the logo, please refer to: https://support.3dcart.com/knowledgebase/article/view/630/5/how-do-i-add-logos-to-my-store Menu Links and Phone Number:- Menu LInks:
As we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014
1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:
Static Webpage Development
Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for PHP Given below is the brief description for the course you are looking for: - Static Webpage Development Introduction
HTML: Parsing Library
HTML: Parsing Library Version 4.1.3 November 20, 2008 (require html) The html library provides functions to read html documents and structures to represent them. (read-xhtml port) html? port : input-port?
,.., «..»
,.., 2018. 09.03.03.19 - «..».... 2018 1 : - 39, 5, 1. : -. :,, -,. -.,,. 2 ... 4 1 -. 6 1.1 -... 6 1.2 -... 9 1.3 -... 11 1.4, -... 13 2. - «..»... 16 2.1.... 16 2.2 CMS WordPress... 17 2.3 -... 22...
Description: This feature will enable user to send messages from website to phone number.
Web to Phone text message Description: This feature will enable user to send messages from website to phone number. User will use this feature and can send messages from website to phone number, this will
Dingle Coderdojo 6. Project Part 2 (of 2) - Movie Poster And Actor! - Lookup. Week 6
Dingle Coderdojo 6 Week 6 Project Part 2 (of 2) - Movie Poster And Actor! - Lookup This is an extension of what you did the last time (the Movie Poster lookup from Week 5). Make sure you ve finished that
BOOTSTRAP RESPONSIVE.
BOOTSTRAP RESPONSIVE sandilyaponukumati@gmail.com BOOTSTRAP Twitter Bootstrap is the most popular front end frameworks currently. It is sleek and powerful mobile first front-end framework for faster and
Responsive Web Design (RWD)
Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p> <a href=" </a></p> </ul> <li> </li> <ol>
11 google
~Arwa Theme~ HTML5 & CSS3 Theme. By ActiveAxon
~Arwa Theme~ HTML5 & CSS3 Theme By ActiveAxon Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact
Programmazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
For instructions to change the logo, please refer to:
Header Logo: For instructions to change the logo, please refer to: https://support3dcartcom/knowledgebase/article/view/630/5/how-do-i-add-logos-to-mystore Menu Links and Phone Number: Menu LInks: From
WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310
WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 Project #4 Updating your class project to be more mobile friendly To gain a fuller appreciate for Responsive Design, please review Chapter 8. Another great
Silk Test Object Recognition with the Classic Agent
Silk Test 13.5 Object Recognition with the Classic Agent Micro Focus 575 Anton Blvd., Suite 510 Costa Mesa, CA 92626 Copyright 2012 Micro Focus. rights reserved. Portions Copyright 1992-2009 Borland Software
Web UI. Survey of Front End Technologies. Web Challenges and Constraints. Desktop and mobile devices. Highly variable runtime environment
Web UI Survey of Front End Technologies Web UI 1 Web Challenges and Constraints Desktop and mobile devices - mouse vs. touch input, big vs. small screen Highly variable runtime environment - different
Spring Data JPA, Spring Boot, Oracle, AngulerJS 적용게시판실습 게시판리스트보기.
Spring Data JPA, Spring Boot, Oracle, AngulerJS 적용게시판실습 http://ojc.asia, http://ojcedu.com 게시판리스트보기 Spring JDBC 또는 MyBatis로만들때보다쉽고빠르게작성할수있다. 스프링컨트롤러는 RestController를적용했으며, 뷰페이지에 Bootstrap 및 AngulerJS 적용했다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
About the Tutorial Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize UI components help in constructing attractive, consistent, and functional web pages and web
The Hypertext Markup Language (HTML) Part II. Hamid Zarrabi-Zadeh Web Programming Fall 2013
The Hypertext Markup Language (HTML) Part II Hamid Zarrabi-Zadeh Web Programming Fall 2013 2 Outline HTML Structures Tables Forms New HTML5 Elements Summary HTML Tables 4 Tables Tables are created with
Mobile Web Development
Mobile Web Development By Phil Huhn 2013-04-30 2013 Northern Software Group Agenda Web-site issues for mobile devices Responsive Design Media Queries Twitter Bootstrap As-is (themes) less variables.less
Bootstrap 3 CSS Classes Desk Reference
Grid Text & Images Basic grid - full width is 12 columns wide
Purpose of this doc. Most minimal. Start building your own portfolio page!
Purpose of this doc There are abundant online web editing tools, such as wordpress, squarespace, etc. This document is not meant to be a web editing tutorial. This simply just shows some minimal knowledge
Deccansoft Software Services
Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module
HTML, CSS, Bootstrap, Javascript and jquery
HTML, CSS, Bootstrap, Javascript and jquery Meher Krishna Patel Created on : Octorber, 2017 Last updated : May, 2018 More documents are freely available at PythonDSP Table of contents Table of contents
HTML and CSS COURSE SYLLABUS
HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page
About the Tutorial. Audience. Prerequisites. Copyright & Disclaimer. Bootstrap
i About the Tutorial Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Want to read more? You can buy this book at oreilly.com in print and ebook format. Buy 2 books, get the 3rd FREE!
Want to read more? You can buy this book at oreilly.com in print and ebook format. Buy 2 books, get the 3rd FREE! Use discount code: OPC10 All orders over $29.95 qualify for free shipping within the US.
Index. CSS directive, # (octothorpe), intrapage links, 26
Holzschlag_.qxd 3/30/05 9:23 AM Page 299 Symbols @import CSS directive, 114-115 # (octothorpe), intrapage links, 26 A a element, 23, 163, 228 abbr element, 228 absolute keywords for font sizing, 144 absolute
HTML: Parsing Library
HTML: Parsing Library Version 6.7 October 26, 2016 (require html) package: html-lib The html library provides functions to read conformant HTML4 documents and structures to represent them. Since html assumes
Udacity Frontend Nanodegree Style Guide
HTML CSS JavaScript Git Udacity Frontend Nanodegree Style Guide Introduction This style guide acts as the of cial guide to follow in your projects. Udacity evaluators will use this guide to grade your
Lecture 7. Action View, Bootstrap & Deploying 1 / 40
Lecture 7 Action View, Bootstrap & Deploying 1 / 40 Homeworks 5 & 6 Homework 5 was graded Homework 6 was due last night Any questions? 2 / 40 How would you rate the di culty of Homework 6? Vote at http://pollev.com/cis196776
c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address
All assignments should be sent to p.grocer@rcn.com Backup please send a cc to this address Note that I record classes and capture Smartboard notes. They are posted under audio and Smartboard under XHTML
Web development using PHP & MySQL with HTML5, CSS, JavaScript
Web development using PHP & MySQL with HTML5, CSS, JavaScript Static Webpage Development Introduction to web Browser Website Webpage Content of webpage Static vs dynamic webpage Technologies to create
QUICK REFERENCE GUIDE
QUICK REFERENCE GUIDE New Selectors New Properties Animations 2D/3D Transformations Rounded Corners Shadow Effects Downloadable Fonts @ purgeru.deviantart.com WHAT IS HTML5? HTML5 is being developed as
Chapter4: HTML Table and Script page, HTML5 new forms. Asst. Prof. Dr. Supakit Nootyaskool Information Technology, KMITL
Chapter4: HTML Table and Script page, HTML5 new forms Asst. Prof. Dr. Supakit Nootyaskool Information Technology, KMITL Objective To know HTML5 creating a new style form. To understand HTML table benefits
Wireframe :: tistory wireframe tistory.
Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17
CUSTOMER PORTAL. Custom HTML splashpage Guide
CUSTOMER PORTAL Custom HTML splashpage Guide 1 CUSTOM HTML Custom HTML splash page templates are intended for users who have a good knowledge of HTML, CSS and JavaScript and want to create a splash page
Table-Based Web Pages
Table-Based Web Pages Web Authoring and Design Benjamin Kenwright Outline What do we mean by Table-Based Web Sites? Review Table Tags/Structure Tips/Debugging/Applications Summary Review/Discussion Submissions/Quizzes/GitHub
Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.
Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM 5049 Advanced Internet Technology Lab Lab # 1 Eng. Haneen El-masry February, 2015 Objective To be familiar with
Making a live edit contact list with Coldbox REST & Vue.js
Tweet Making a live edit contact list with Coldbox REST & Vue.js Scott Steinbeck Mar 28, 2016 Today we will be making a contact database that you can quickly and easily manage using ColdBox and Vue.js.
<page> 1 Document Summary Document Information <page> 2 Document Structure Text Formatting <page> 3 Links Images <page> 4
Document Summary Document Information Document Structure Text Formatting Links Images Lists Forms Input Type Attributes Select Attributes Option Attributes Table Formatting Objects and iframes iframe Attributes
Zero to Hero. CSS Frameworks. Zero to Hero. - Boris Fritscher 1 / 26. Bootstrap (
643-1-1 Projet de technologies WEB de présentation Zero to Hero Part 1: From blank page to deployed website Tools and git CSS Frameworks don't reinvent the wheel use best practices get reusable components
CSC Web Programming. Introduction to HTML
CSC 242 - Web Programming Introduction to HTML Semantic Markup The purpose of HTML is to add meaning and structure to the content HTML is not intended for presentation, that is the job of CSS When marking
Integrating the Quotation page with your site
Integrating the with your site Introduction Until June 2014, for customers to obtain a quote for your service, it was necessary to redirect the customer to the Instant-Quote.co site. This is no longer
CSS (Cascading Style Sheets): An Overview
CSS (Cascading Style Sheets): An Overview CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that
CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6
CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r
UI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
For instructions to change the logo, please refer to: ore
Header Logo: For instructions to change the logo, please refer to: https://support.3dcart.com/knowledgebase/article/view/630/5/how-do-i-add-logos-to-my-st ore Menu Links and Phone Number: Menu LInks: From
26 $host = "localhost" ; 27 $user = "marcolg" ; 28 $password = "" ; 52 $connessione = new mysqli ($host, $user, $password );
C:\Users\Marco\Documents\eqFTP Projects\Sito\stazione\statistiche.php: 1/5 1 2 3 4 5 6
Building Web Applications
Building Web Applications Mendel Rosenblum CS142 Lecture Notes - Building Web Applications Good web applications: Design + Implementation Some Design Goals: Intuitive to use Don't need to take a course
CIS 228 (Spring, 2012) Final, 5/17/12
CIS 228 (Spring, 2012) Final, 5/17/12 Name (sign) Name (print) email I would prefer to fail than to receive a grade of or lower for this class. Question 1 2 3 4 5 6 7 8 9 A B C D E TOTAL Score CIS 228,
Lecture : 3. Practical : 2. Course Credit. Tutorial : 0. Total : 5. Course Learning Outcomes
Course Title Course Code WEB DESIGNING TECHNOLOGIES DCE311 Lecture : 3 Course Credit Practical : Tutorial : 0 Total : 5 Course Learning Outcomes At end of the course, students will be able to: Understand
A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension
HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called
Produced by. Agile Software Development. Eamonn de Leastar
Agile Software Development Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie Pacemaker
Web Development & Design Foundations with HTML5 & CSS3 Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What tag pair is used to create a new paragraph? a. b. c. d. 2. What tag pair
HTML Forms. By Jaroslav Mohapl
HTML Forms By Jaroslav Mohapl Abstract How to write an HTML form, create control buttons, a text input and a text area. How to input data from a list of items, a drop down list, and a list box. Simply
Oliver Pott HTML XML. new reference. Markt+Technik Verlag
Oliver Pott HTML XML new reference Markt+Technik Verlag Inhaltsverzeichnis Übersicht 13 14 A 15 A 16 ABBR 23 ABBR 23 ACCEPT 26 ACCEPT-CHARSET
WEB DESIGNING COURSE SYLLABUS
F.A. Computer Point #111 First Floor, Mujaddadi Estate/Prince Hotel Building, Opp: Okaz Complex, Mehdipatnam, Hyderabad, INDIA. Ph: +91 801 920 3411, +91 92900 93944 040 6662 6601 Website: www.facomputerpoint.com,
UNIVERSITY OF TORONTO Faculty of Arts and Science APRIL 2016 EXAMINATIONS. CSC309H1 S Programming on the Web Instructor: Ahmed Shah Mashiyat
UNIVERSITY OF TORONTO Faculty of Arts and Science APRIL 2016 EXAMINATIONS CSC309H1 S Programming on the Web Instructor: Ahmed Shah Mashiyat Duration - 2 hours Aid Sheet: Both side of one 8.5 x 11" sheet
Certified HTML5 Developer VS-1029
VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the
А «- - «Exellent»» 50, 18, «Exellent»., , -., -. -,, html -. - «Exellent»,.
А «- - «Exellent»» 50, 18, 21. - - «Exellent»., -. -. -. -, -., -. -,, html -. - «Exellent»,. А... 3 1 -... 5 1.1, -... 5 1.2 Э -... 8 1.3 -... 9 1.4, -... 16 1.4.1... 16 1.4.2... 18 1.4.3.... 18 2 - «Exellent»...
Basic Bootstrap Classes
.container Basic Bootstrap Classes sets fixed width to an element (which changes depending on a screen size to other fixed values, so it's still responsive) on all screen sizes except xs - on xs, the width
SYBMM ADVANCED COMPUTERS QUESTION BANK 2013
CHAPTER 1: BASIC CONCEPTS OF WEB DESIGNING 1. What is the web? What are the three ways you can build a webpage? The World Wide Web (abbreviated as WWW or W3, commonly known as the web), is a system of
WEBSI TE DESIGNING TRAINING
WEBSI TE DESIGNING TRAINING WHAT IS WEB DESIGN? We b s ite design m e a n s p l a n n i n g, c r e a t i o n and u p d a t i n g of websites. We bsite design also involves i n f o r m a t i o n a rchitecture,
How the Internet Works
How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).