What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language)

Size: px

Start display at page:

Download "What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language)"

Jeffery Leonard
5 years ago
Views:

1 What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language)

2 What is a website? A website is a collection of web pages containing text and other information, such as images, sound and video files, that are made available on the World Wide Web through the use of a web server A web page is a single page of text, images, sound, video, etc., that is built using HTML tags It has a URL: e.g. APACHE, IIS, etc. EDGE/IE FIREFOX CHROME OPERA SAFARI Mobile, etc. RECEIVED BY CLIENT WEB Port 443 for HTTPS

3 Creating websites 1 Static web sites Content is static in separate files Dynamic web sites Content is dynamic using databases and programming (writes the content) allowing visitors to interact Free web services MySpace, FaceBook, Google+, WordPress, Blogger, Flickr, YouTube, Twitter, Google Docs, Instagram etc. CMS (Content Management Systems) Allows to create pages directly online in an automated way Word processor save document to web page Built-in, will usually create a bad web page Use a specific conversion application instead Click to Convert Tools

4 Static website Some browsers actually make 2 requests. First they try to dwl the /favicon.ico

5 Dynamic website

6 Creating websites 2 HTML (Hypertext Markup Language) Created by Tim Berners-Lee in 1993 from SGML Layout and formatting (style or apperance) CSS - Cascading Style Sheets Web server and web server software Apache or IIS etc. Domain name registrators and DNS Point to free web services as (Facebook, Blogger etc.) Point to rented space hosting Shared hosting, dedicated server or a virtual server? Create Web Content Use open source CMS as Joomla, Drupal or WordPress Use a WYSIWYG (What You See Is What You Get) CMS-tool which usually is commercial Create the site content yourself. HTML > CSS > JavaScript > PHP/ASP.NET/Python > ***SQL*** > dynamic web 2.0 online application

Web editors etc. Commercial editors JetBrains WebStorm and PhpStorm, Microsoft Visual Studio, Sublime Text WYSIWYG editor or just a text editor? https://www.youtube.com/watch?

7 Web editors etc. Commercial editors JetBrains WebStorm and PhpStorm, Microsoft Visual Studio, Sublime Text WYSIWYG editor or just a text editor? Comparison of HTML editors Dedicated or multi-programming language capable? Some free multi capable editors Notepad++, Microsoft Visual Studio Code, Brackets, Atom, JetBrains PyCharm, CodeLobster, NetBeans,... Software to copy/upload your files to your web server SCP (WinSCP) or FTP etc. Other things to maintain/remember regarding your web server Stats, SEO/analytics, mail, logs, security, databases, services, users,...

8 What is HTML 1 HTML is text file containing XML-like markup tags Follows published standards via: Common elements in a html text file (page) A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags A paragraph, denoted using the <p> tag A link, denoted using the <a> (anchor) tag A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags An image, denoted using the <img> tag A divider, denoted using the <div> tag A text span, denoted using the <span> tag Elements define the structure or semantics of the document It generally consists of a start tag, content, and an end tag

9 What is HTML 2 When you write the HTML markup language you need to follow the rules called syntax Tags usually come in pairs, with some exceptions <html>...</html>, <body>...</body>, <p>...</p> Some tags with empty elements <hr> (horizontal ruler), <br> (single line break), <img>, Whats the difference between the <span> and the <div> tag? The <span> tag is used for grouping and applying styles to inline elements The <div> tag is used with block-level content The markup tags tell the built in parser in the web browser how to structure and display the page text For example put a text in a bold font HTML tags are not case sensitive <b>i am bold now!</b>

10 What is HTML 3 Most elements can have attributes Each element has a different set of attributes relevant to the element There are a few global attributes, the most common of them are id - Denotes the unique ID of an element in a page. Used for locating elements by using links, JavaScript, and more class - Denotes the CSS class of an element style - Denotes the CSS styles to apply to an element The tags should have quoted attributes <a href=" is a link</a> <img src="img_girl.jpg"> <p class="thesis" style="color:blue;font-size:20px;">text paragraph</p> <div id="text1" style="font-family:verdana;">block of content</div>

11 What is HTML 4 The web browser parses the markup to know where things begin and end in order to be able to render and display the page </ element name > or < /> ends a tag which may be nested Web pages are free-form input; line breaks can be used most anywhere and don't affect the appearance of the document Your entire page could be a single line of text! HTML code and result <!doctype html> <html> <head> <title>my first web page</title> </head> <body> <h1 style="color:blue;font-family: verdana;">this is a Blue Heading</h1> <p style="color:red;font-size:20px;">this is my first web page.</p> <b><i>this text is in bold italic!</i></b> <br /> Normal text. </body> </html>

12 HTML markup cheat sheets

13 Repetition, meta tags and validation Tags: <tag> your content </tag> The <head> tag contains information about the page as a whole The <title> tag which is where your page s title gets put The </ > tag means "close the previous tag" The paragraph <p> tag starts each new block of text The <b> tag makes text bold and <i> makes it italic 6 heading levels, the main heading on your page may be <h1> or <h2> Meta tags Meta-tags are a way for a web page to supply information about itself to the web browser that is displaying the page <meta name="description" content="latest availability for the Grand Hotel"> <meta name="keywords" content="availability, late bookings, vacant rooms"> HTML visibility Everyone that can view your page can read and copy your code HTML validation ensure that your code is correct Built-in in some tools or use

14 An exercise and first lab: Dipping the toes... Links in Learn Tools W3schools Validate html code

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for