Essentials of System and Web Interfacing PDF

ESSENTIALS OF SYSTEM AND WEB INTERFACING G. Malleswari Assistant Professor CSE Department UNIT-IV: Introduction to CMS Word Press: Introduction to CMS, Introduction to Word Press, Web Publishing for masses, how Word Press works...

ESSENTIALS OF SYSTEM AND WEB INTERFACING G. Malleswari Assistant Professor CSE Department UNIT-IV: Introduction to CMS Word Press: Introduction to CMS, Introduction to Word Press, Web Publishing for masses, how Word Press works, the lifecycle of Word Press blog post, Download Word Press and Install, Uploading your Word Press files to the web server, Working with Hosting panel, Using the Dashboard and its components, create a first blog post, preview and publish your post. Introduction to HTML: Document Structure, Basic formatting elements, links and navigation, image, image maps, List,Tables, and Forms. HTML 5: semantic elements, Embedding Media (video and audio), storage: local,session. 2 What is HTML ? → HTML stands for Hypertext Markup Language. → It is a standard markup language used to design the documents displayed in the browsers as a web page. → This language can become more interactive and attractive by using CSS (Cascading Style Sheet) and JS (JavaScript) within it. → The HTML word defines some specific meaning within it. → Hypertext comes from the Hyperlink which means connections between several pages, Markup means the defined elements will be the page layout and elements within the page. → The language combines both features and makes it Hypertext Markup Language. 3 HTML Versions: → HTML was created by Tim Berners-Lee in 1991. → The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1995. → Now we use HTML-5 published in 2014. HTML Introduction: → HTML elements are represented by using tags. → < > represents the starting tag. → represents the ending tag. → There are generally two types of tags in HTML: 1.Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing() tags. 2.Singular Tags: These tags are not required to be closed. < > 4 HTML Page Structure: → It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created. 5 → This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case sensitive. → This is called the HTML root element. All other elements are contained within it. → HTML elements used inside the element include: → The body tag is used to enclose all the visible content of a webpage. In other 6 Features of HTML It is easy to learn and easy to use. It is platform-independent. Images, videos, and audio can be added to a web page. Advantages of HTML HTML is used to build websites. It is supported by all browsers. It can be integrated with other languages like CSS, JavaScript, etc. Disadvantages of HTML HTML can only create static web pages. For dynamic web pages, other languages have to be used. A large amount of code has to be written to create a simple web page. The security feature is not good. 7 → HTML text editors are used to create and modify web pages. → HTML codes can be written in any text editor including the notepad. → One just needs to write HTML in any text editor and save the file with an extension “.html” or “.htm”. Comment Tag: is the comment tag In HTML, it doesn’t read the line present inside this tag. 8 9 10 11 12 13 HTML Headings: → These tags help us to give headings to the content of a webpage. → These tags are mainly written inside the body tag. → HTML provides us with six heading tags from to. → Every tag displays the heading in a different style and font size. → , , , , , 14 HTML Paragraph: → These tags help us to write paragraph statements on a webpage. They start with the tag and ends with. HTML Break: → These tags are used for inserting a single line type break. It does not have any closing tag. In HTML the break tag is written as. 15 Formatting elements: Formatting elements were designed to display special types of text: ⚫ - Bold text ⚫ - Important text ⚫ - Italic text ⚫ - Emphasized text ⚫ - Marked text ⚫ - Smaller text ⚫ - Deleted text ⚫ - Inserted text ⚫ - Subscript text ⚫ - Superscript text 16 Color Names In HTML, a color can be specified by using a color name: Hello World wecome to cvr... 17  Tag-Anchor tag → The tag (anchor tag) in HTML is used to create a hyperlink on the webpage. → This hyperlink is used to link the webpage to other web pages or some section of the same web page. → It’s either used to provide an absolute reference or a relative reference as its “href” value. 18 HTML LINKS AND NAVIGATION : The Navigation Section element. → The HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and index. 19  Tag → HTML tag is used to add image inside webpage/website. Syntax: → src:It is used to specify the path to the image. → alt: It is used to specify an alternate text for the image. It is useful as it informs the user about what the image means and also due to any network issue if the image cannot be displayed then this alternate text will be displayed. → height: It is used to specify the height of the image. → width: It is used to specify the width of the image. 20 List Tag → Lists are used to store data or information in web pages in ordered Or unordered form. → HTML supports several types of list elements that can be included in the tag of the document. → These Elements may also be nested, i.e., the onset of elements can be Embedded within another. There are three different types of HTML lists: 1. Ordered List or Numbered List (ol) 2. Unordered List or Bulleted List (ul) 3. Description List or Definition List (dl) 21 List Item tag → List item tag is used to define each item of a list. Once we define list items with the tag, the list appears in Web browsers in the bulleted form (by default). It is used inside both ordered and unordered lists. Syntax: content 22  Tage → The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. → The HTML tables are created using the tag in which the tag is used to create table rows and tag is used to create data cells. The elements under → are regular and left aligned by default. 23 HTML FORMS: → action is a URL specifying the location to which the contents of the form are submitted. → method: Data can be sent in one of the two ways: get, post. → get is used to retrieve information from a server → post is used to send information to a server 24 25 26 The Action Attribute: → The action attribute defines the action to be performed when the form is submitted. The element → The tag defines a label for many form elements. → The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element. → The element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) Because , when the user clicks the text within the element, it toggles the radio button/checkbox. 27  → The element is the most important form element. → The element can be displayed in several ways, depending on the type attribute. Example: → Displays a one-line text input field. → Displays a radio button (for selecting one of many choices) → Displays a checkbox (for selecting zero or more of many choices) → Display the sbmit button 28 HTML -5: Semantic Elements → A semantic element clearly describes its meaning to both the browser and the developer. → Examples of non-semantic elements: and - Tells nothing about its content. → Examples of semantic elements: , , and - Clearly defines its content. 29 HTML FORMS: 30 HTML Element The element defines a section in a document. According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading." Examples of where a element can be used: Chapters Introduction News items Contact information A web page could normally be split into sections for introduction, content, and contact information. 31  WWF The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. WWF's Panda symbol The Panda has become the symbol of WWF. Beijing Zoo to the London Zoo in the same year of the establishment of WWF. 32 HTML Element The element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site. Examples of where the element can be used: Forum posts Blog posts User comments Product cards Newspaper articles 33  The article element Google Chrome Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today! Mozilla Firefox Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018. 34 HTML Element The element represents a container for introductory content or a set of navigational links. A element typically contains: one or more heading elements ( - ) logo or icon authorship information Note: You can have several elements in one HTML document. However, cannot be placed within a , or another element. 35  What Does WWF Do? WWF's mission: WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature. 36 HTML Element The element defines a footer for a document or section. A element typically contains: authorship information copyright information contact information sitemap back to top links related documents You can have several elements in one document. 37  Author: Hege Refsnes [email protected] 38 HTML Element The element defines a footer for a document or section. A element typically contains: authorship information copyright information contact information sitemap back to top links related documents You can have several elements in one document. 39 HTML Element → The element defines a set of navigation links. → Notice that NOT all links of a document should be inside a element. The element is intended only for major blocks of navigation links. → Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content. 40  HTML | CSS | JavaScript | jQuery 41 HTML Element → The element defines some content aside from the content it is placed in (like a sidebar). → The content should be indirectly related to the surrounding content. My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family! Epcot Center Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events. 42 HTML and Elements → The tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. → The tag defines a caption for a element. → The element can be placed as the first or as the last child of a element. → The element defines the actual image/illustration. 43  Places to Visit Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site. Fig.1 - Trulli, Puglia, Italy. 44 Why Semantic Elements? → According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities." Semantic Elements in HTML Below is a list of some of the semantic elements in HTML. Tag Description Defines independent, self-contained content Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a footer for a document or section Specifies a header for a document or section Specifies the main content of a document Defines marked/highlighted text 45  Defines marked/highlighted text Defines navigation links Defines a section in a document Defines a visible heading for a element Defines a date/time 46