تصميم صفحات الانترنت web design

Slides:

Advertisements

Similar presentations

Hyper Text Markup Language.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,

Advertisements

WeB application development

Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2.

Authoring Languages and Web Authoring Software 4.01 Examine web page development and design.

HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.

Basic HTML. HTML Background November 1990, first created by Tim Berners Lee, the father/inventor of WWW Knighted by Queen Victoria in 2004 Hypertext is.

4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.

Chapter 14 Introduction to HTML

Web Design Basic Concepts.

Tutorial 1: Getting Started with HTML5

Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.

Computer science Languages, etc.. Overview For web-applications (HTML, JS) – Designing languages (HMTL, CSS) – Server Languages (PHP, ASP) – Extensions.

Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University

Multimedia and Web Technology Prepared by: Asst. Prof. Maryam Eskandari.

What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.

Adapting a Site Template Using Drupal Themes and SASS/LESS.

Key question  What are the three standardized core languages used to implement web pages? Write the full name not the abbreviation and describe the “layer”

.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

1 Essential HTML coding By Fadi Safieddine (Week 2)

Styling and theming Build campaigns in style. What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need.

HTML INTRODUCTION, EDITORS, BASIC, ELEMENTS, ATTRIBUTES.

>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.

Tags, ID’s and Classes. Xhtml tags There are many tags to use so the CSS can talk to the webpage:

XHTML By Trevor Adams. Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)

Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.

Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML,

Making iServices Subscriber More Mobile Friendly `

Louisa Lambregts, Louisa Lambregts

Jozef Goetz, STEM Summer Camp Dr. Jozef Goetz.

4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.

HTML A brief introduction HTML1. HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup.

3/30/15.  Who is Tim Berners-Lee? 1. Assessing needs 2. Determining content structure 3. Determining site structure 4. Determining navigation structure.

HTML Assoc. Prof. Rozinah Jamaludin 28 January 2010.

learn. do. dream. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes.

University of South Asia Course Name: Web Application Prepared By: Md Rezaul Huda Reza

Web Programming Introduction to Web Technology HTML & Dynamic web content.

DIGI KNOW? Intro to Web Development Bishoy Riad, Director of Web Development.

Bootstrap Front-End Framework for Responsive Web Sites Svetlin Nakov Technical Trainer Software University

Cheryl Wolfe Web Services Administrator Tampa-Hillsborough County Public Library James Day Electronic Services Librarian Embry-Riddle Aeronautical University.

1/7/2016www.infocampus.co.in1. 1/7/2016www.infocampus.co.in2 Web Development training gives you and all-round training in both the design and the development.

COMP 143 Web Development with Adobe Dreamweaver CC.

Chapter 1: Intro to HTML Section 1: HTML Structure Presentation Section 2: Layout of an HTML File Section 3: Working with Lists & Tables Section 4: HTML.

Hyper Text Markup Language.  My First Heading My first paragraph. Example Explained The DOCTYPE declaration defines the document type The text between.

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.

visit or call to enroll now..

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

Quick look under the hood Technologies used Get familiar with them! By Michał Kostecki IITc.

Chapter 2 Markup Language By : Madam Hazwani binti Rahmat

Front-end framework 1.

MIT 511- Web Design & Usability

CSE 102/ISE 102 Introduction to Web Design and Programming

4.01B Authoring Languages and Web Authoring Software

Designing Webpages Firstname Lastname.

Front-End Framework for Responsive Web Sites

>> HTML: Tables.

W3C Web standards and Recommendations

Introduction to Bootstrap Bootstrap සදහා හැදින්වීම

Internet Programming.

Client-Side Web Technologies

4.01B Authoring Languages and Web Authoring Software

Robert Kiffe Senior Customer Support Engineer

WEB PAGE AUTHORINHG AND DESIGNING

Overview of HTML.

Mozafar Bag-Mohammadi

Secure Web Programming

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

ხელმძღვანელი: დიმიტრი ქარაული

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

Presentation transcript:

تصميم صفحات الانترنت web design

Table Subtitle Main Title title title1 title2 title title title3

Steps / webpage Analysis Designing (Photoshop, illustrator …..) Programming ( Java, C# , PHP , VB.NET , … ) Add Content or add menu , images …. Web Design (theming ,html and css)

Intro Html SASS Bootstrap framework JQuery Layout CSS Theming Grid JavaScript Web design SASS JQuery CSS Grid Foundation framework Less

HTML & CSS

HTML & CSS HTML5 & CSS3 Tim Berners-Lee ….. 1980 1989/1990/1993 - first manual / some items - SW - CSS 1993 – HTML 1 1994 – HTML 2,3 , W3C 1996 – HTML 3.2 (Supported from Netscape & Explorer ) 1997 – HTML 4 2000 – XHTML (html & xml) HTML5 & CSS3

Where? Html alone page. Html with Java ,php …. Html with css and js. <input type="image" src="image.gif" name="foo" /> Html with Java ,php …. <?php echo '<a href="' . htmlspecialchars("/nextpage.php?stage=23&data=" . urlencode($data)) . '">'."\n"; ?> Html with css and js. <script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; } </script> <button type="button" onclick="myFunction()">Click Me!</button>

Tags HTML Attribute CSS Body{ Color:#ffffff; } <html> </html <head> </head> Body{ Color:#ffffff; } <body> </body> <image/> <a></a>

Layouts and width page 1 Colum (Instagram) 2 Colum 3 Colum (Twitter) 4 Colum (Facebook) Header Logo ,menu Body (Content) Footer

LESS AND SASS Ex: Variable (color) Less is a CSS pre-processor meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. SASS is the most mature, stable, and powerful professional grade CSS extension language in the world.

Frameworks and Responsive Page 3 levels Pc – full width Ipads and tablets Mobiles Bootstrap (html ,css ,js) Foundation 1024 px 960 px 644 px > 320

SW and Tools Notepad Notepad++ Atom Brackets MS FrontPage Adobe Dreamweaver. Google Chrome Extension(inspect elements) Mozilla Firefox (FireBug)

Website tutorials http://www.w3schools.com/ https://css-tricks.com/ https://Google.com/ abuyahia.info