Introduction to HTML & CSS

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Table, List, Blocks, Inline Style
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.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
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,
WeB application development
Website Design.
Cascading Style Sheets
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.
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
ASHIMA KALRA.  WHAT IS HTML WHAT IS HTML  HTML TAGS HTML TAGS  FORMATTING TAGS FORMATTING TAGS.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Made by: Dan Ye. Introduction Basic Last Page ☆ HTML stands for Hyper Text Markup Language; ☆ HTML is not a programming language, it is a markup language;
4.01 Cascading Style Sheets
HTML BASIC
Computer Sciences Department
Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
Basics of HTML.
HTML. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
DAT602 Database Application Development Lecture 14 HTML.
_ HTML, XHTML & CSS Sami Niemelä | Module 1: Introduction to digital media: Day 02.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
HTML Structure & syntax
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
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.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.
INTRODUCTION TO CSS. OBJECTIVES: D EFINE WHAT CSS IS. K NOW THE HISTORY OF CSS. K NOW THE REASON WHY CSS IS USED. CSS SYNTAX. CSS ID AND CLASS.
CSS Basic (cascading style sheets)
Basic HTML PowerPoint How Hyper Text Markup Language Works
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
Introduction To HTML.  HTML stands for Hyper Text Markup Language.  HTML was developed by Tim Berners-Lee.  HTML is maintained by World Wide Web Consortium(W3C).
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
DIV, Span, CSS.
HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.
Cascading Style Sheets CSS. Source W3Schools
Introduction to HTML Year 8. What is HTML O Hyper Text Mark-up Language O The language that all the elements of a web page are written in. O It describes.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
objectives Learning WEB TECHNOLOGIES. Understanding Salient features of WEB TECHNOLOGIES. Designing of WEB PAGES on your own. Development of WEB APPLICATIONS.
1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.
CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.
Basic HTML Introduction to HTML.
Pertemuan 1 Desain web Pertemuan 1
Web Basics: HTML/CSS/JavaScript What are they?
4.01 Cascading Style Sheets
>> Introduction to CSS
Introduction to web design discussing which languages is used for website designing
WEBSITE DESIGN Chp 1
Website Design 3
What are Cascading Stylesheets (CSS)?
Internet Technologies I - Lect.01 - Waleed Ibrahim Osman
Web Design and Development
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Pertemuan 1 Desain web Pertemuan 1
4.01 Cascading Style Sheets
Presentation transcript:

Introduction to HTML & CSS

Hyper Text Markup Language What is HTML Hyper Text Markup Language It is a markup language used to create the content and semantic structure of Web pages. A Web page is comprised of a number of HTML elements, each of which has a particular meaning in the context of a Web page.

Web Browsers The purpose of a web browser (Chrome, Internet Explorer, Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses these tags to interpret the content of the page.

HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name

HTML Elements An HTML element is everything between the start tag and the end tag, including the tags: HTML Element: <h1>This is a heading</h1>

Element Attributes HTML elements can have attributes, which provide additional information/usage Attributes are always specified in the start tag Attributes come in name/value pairs Eg: <div id=“container” style=“background:#000;”></div> <img src=“test.jpg” alt=“sample” width=“200” height=“200” />

Essential tags <html> <title> <head> <body> <link type=“” rel=“” href=“” > <script type=“” src=“”> <style>

Basic Structure of a HTML document <html> <title>Page title</title> <head></head> <body> ****Content comes here**** </body> </html>

Deprecated Tags and Attributes In HTML 4, several deprecated tags and attributes were used to style documents. These tags are not supported in HTML 5. Avoid using the elements <font>, <center>, and <strike> and the attribute bgcolor.

Some important tags <h1> to <h6>-Headings <p> - Paragraphs <a href=“”> Anchor tag – links <img src=“”> – adding images <div> -adding divisions, basically used for layout and with CSS <input type=“”> - checkboxes, text-area, submit buttons, radio,etc. <form> - creating a HTML form Note that the <img> and <input> do not have closing tags

Some important tags <table> creates a table <tr> - table row <td> - table cell <br> - break line <hr> - horizontal line

Cascading Style Sheets CSS Cascading Style Sheets Styles define how to display HTML elements. CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

Browser style sheets (default) Types of style sheets Browser style sheets (default) User style sheets Author style sheets Inline Internal External

Adding CSS to HTML CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS file The preferred way to add CSS to HTML, is to put CSS syntax in external CSS files.

Inline Styles An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property.

Internal Style Sheets An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag

External style sheets External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! Saved in .css extension Each page must link to the style sheet using the <link> tag:

Style priority Inline style Internal style sheet External style sheet Decreasing Priority !important – used with a style attributes to override other style attributes assigned to an element

CSS Syntax h1 {color:#09C;font-family:Helvetica;} Selector Property Value Property Value

CSS Selectors They allow authors to target specific HTML elements so that they can be styled.

Type selector The type selector is written using the element type only. A type selector selects every instance of the element type regardless of their position in the document tree.

ID & Class In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id selector is used to specify a style for a single, unique element. The class selector is used to specify a style for a group of elements.

ID Selectors The id selector is written using a “#” followed by the id value. Note: Class values are case-sensitive. Browsers will interpret “a” and “A” differently.

Class Selectors The class selector is written using a “.” followed by the class value. Note: Class values are case-sensitive. Browsers will interpret “a” and “A” differently.

Class Selectors You can also combine type and class selectors to isolate specific instances of an element. For example: This means that only paragraphs with a class of “big” will be selected.