Introduction to Web Design, HTML & WordPress. What is Web Design? Web Design encompasses many different skills and disciplines in the building and maintenance.

Slides:

Advertisements

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

Advertisements

WeB application development

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

The Client-Server Model for the Web 1. A Web Client (usually in the form of a web browser) makes an HTTP request to a specific web server. 2. The Web Server.

ICT for IGCSE – Syllabus Cambridge IGCSE ® Information and Communication Technology0417.

Web Forms and ASP.NET Programming Right from the Start with Visual Basic.NET 1/e 12.

MIS 425 Lecture 1 – HTML Basics and Web Page Design Instructor: Martin Neuhard

Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.

Website design basics QUME Learning objectives Understand the basic elements of a Web page and how it is produced Be aware of different approaches.

Principles of Internet Marketing Chapter 10 Programs and Languages.

Project 1 Introduction to HTML.

Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Mgt 240 Lecture Website Construction: Software and Language Alternatives March 29, 2005.

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

CPSC 203: Introduction to Computers Tutorials 03 & 29 by Jie (Jeff) Gao.

1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.

HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.

INTRO TO GRAPHIC DESIGN IN THE NEW MEDIA ART468. What is a Web Designer?  A web designer creates websites.  When working as a designer, your clients.

Web Design Basic Concepts.

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

WEB DESIGN This course accompanies: -DiDA -GCSE ICT -A-Level ICT Insert Teacher Name Here By xIslandDesign.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

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.

Exploring Microsoft Office XP - Microsoft Word 2002 Chapter 61 Exploring Microsoft Word Chapter 6 Creating a Home Page and Web Site By Robert T. Grauer.

Adobe Dreamweaver CS5 Introduction Web Site Development and Adobe Dreamweaver CS5.

Build a Free Website1 Build A Website For Free 2 ND Edition By Mark Bell.

Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.

HTML Structure & syntax

Chapter 13-Tools for the World Wide Web. Overview Web servers. Web browsers. Web page makers and site builders. Plug-ins and delivery vehicles. Beyond.

Web Design (2) Brackets - introduction. Brackets Brackets is a web design code editor It is an open-source project initiated by Adobe (creator of Dreamweaver)

HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.

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

Creating Webpage Using HTML

Objective Understand concepts used to web-based digital media. Course Weight : 5%

HTML BASICS Web Design I. Web Design  WWW created in the late 1980’s  Used in academics for the next 5 years  Mosaic (1994) allowed both pictures &

Introduction to web development and HTML MGMT 230 LAB.

LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.

Web Page Design Introduction. The ________________ is a large collection of pages stored on computers, or ______________ around the world. Hypertext ________.

Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.

CPSC 203 Introduction to Computers Lab 66 By Jie Gao.

Web Design. How do web pages work? Webpages are written in a code called HTML. Programs like Internet Explorer read the code, and then show it as a web.

1 Chapter 01: Introduction by Tharith Sriv. This course covers the following topics:  Hypertext Markup Language (HTML)  Cascading Style Sheets  JavaScript.

HTML HyperText Markup Language. Text Files An array of bytes stored on disk Each element of the array is a text character A text editor is a user program.

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

The World Wide Web. What is the worldwide web? The content of the worldwide web is held on individual pages which are gathered together to form websites.

HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.

HTML Hyper Text Markup Language. The Basics u HTML documents contain “tags” which instruct the Browser software on how to present the information within.

Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!

HTML HyperText Markup Language Victoria E. Kozlek.

Behind every site is a mix of special languages that your web browser understands The main way of describing any website is HTML HTML stands for Hyper.

HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.

HTML Structure & syntax

HTML Structure & syntax

Project 1 Introduction to HTML.

4.01B Authoring Languages and Web Authoring Software

Exploring Microsoft Word 2000

Chapter 1 Introduction to HTML.

Creating a Successful Web Presence

4.01B Authoring Languages and Web Authoring Software

Introduction to Web Page Design

Overview of HTML.

Chapter 3 – part2.

Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!

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

WEB DESIGNING THROUGH HTML

HTML Structure & syntax

Presentation transcript:

Introduction to Web Design, HTML & WordPress

What is Web Design? Web Design encompasses many different skills and disciplines in the building and maintenance of websites. Web Design focuses on graphic design, user interface design, user experience design, authoring and SEO (search engine optimization).

What is Web Design? Many different programming languages/codes used for web design: HTML, PHP, Javascript, ASP.NET, C++, C# etc.

What is Web Design? Many tools are available to assist in building web sites.

HTML Programming Language Programming Languages are artificial languages used to communicate instructions to a machine. You (the programmer) type a command and the machine does the work. HTML is the main programming language for creating web pages viewed by a web browser. Stands for HyperText Markup Language. Hypertext is text (words) that allow the viewer to click and be sent to more information, images, new page, etc. Common web browsers: Internet Explorer, Firefox & Chrome HTML allows the text to be formatted (color, size, location, etc.), in the web browser, to meet the programmers needs.

How Does HTML Work? HTML uses tags that describe to the browser how the information being displayed should look or act. Tags are a specific list of words, letters, numbers or symbols framed by <>. This is the HTML tag for making a word bold: There must be a start and end tag. This way the browser knows where the bold wording starts and ends. An end tag looks like this: Adding the forward slash makes it an end tab. Example: The Tobin is my favorite place.

The Tobin is my favorite place.

Lets Try Using HTML Open up a new text file. Write a sentence or two and then put the bold tags to work for you. to tell the browser where to start making your words or letters bold. to tell the browser to stop making them bold. When finished with your markup. Save the file as: YourName.html

Viewing HTML Code You can view the HTML code for any website you visit. Goto: Right click with your mouse on any area that does not contain information (images, text, etc.). Select View Source or View Page Source depending on the web browser you are using. A new window will pop up with all of the code that was written to make the page you are visiting.

Web Design Tools WYSIWYG HTML Editors: Adobe Dreamweaver & GoLive Microsoft Expression Web Coffeecup …and tons more Graphic Design Software: Adobe Photoshop, Illustrator, etc CorelDRAW & Paintshop Pro Content Management Systems: Software that allows you to create, manage, store & display stuff on web pages. WordPress Joomla Drupal

What is WordPress? WP is a Content Management System (CMS) used for posting information on the internet. Built on PHP and HTML. Was initially used exclusively as a blogging platform, it has become popular as a way to create regular websites too. WP contains a built-in WYSIWYG editor that allows you to create and grow your website with ease. According to a 2011 study, approximately 22% of all new websites use WordPress as a platform.

How much does WordPress cost? Using WordPress software is free, as it is an open-source product. Open source software: created by multiple contributors in a public manner. The source code is made available to everyone and users are free to study, modify, and even improve the software. Other examples of open source software: Mozilla Firefox (web browser) Android (operating system for mobile devices) OpenOffice (word processing, spreadsheets, etc.)

Summary Web Design is the skill of creating and displaying information on web pages. HTML is the main programming language used for web pages. HTML uses tags to tell the browser what to show and how to show it. Wordpress is an easy way to create fully functional, easy to maintain web sites.