{"id":244,"date":"2020-04-12T23:06:54","date_gmt":"2020-04-12T23:06:54","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/ebooks\/chapter\/tutorial-2a-%e2%80%a2-web-based-ebook\/"},"modified":"2021-07-19T18:05:59","modified_gmt":"2021-07-19T18:05:59","slug":"tutorial-3-web-based-ebook","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/ebooks\/chapter\/tutorial-3-web-based-ebook\/","title":{"raw":"Tutorial 3 \u2022 Web-Based eBook","rendered":"Tutorial 3 \u2022 Web-Based eBook"},"content":{"raw":"

A manually-created, web-based eBook may be a good solution for short books of, say, 6 pages or less. We will be using this web eBook to demonstrate HTML tags and CSS styles that are useful for creating special effects when editing the XHTML in eBooks.<\/p>\r\n\r\n

Orientation to the Web Page<\/h2>\r\n
    \r\n \t
  1. Open Dreamweaver or a free HTML editor, then open the HTML file for the web eBook. Note how the page has been designed with a fixed layout that looks like an 8.5x11\" page.<\/li>\r\n \t
  2. If you're new to HTML, note the use of the tags to mark all the sections and text, including <p> paragraph, <h1> to <h6> headings, <img> image, and <div> division for objects and grouping other tags.<\/li>\r\n \t
  3. Also note the <style> tag in the <head> of the document and how it is used to select specific tags and apply specific styles. Tags can be selected by their tag type or by labeling them with an ID (used once per page) or class (used multiple times in a page).<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n\r\n
    \r\n

    HTML <\/strong>T<\/strong>ags for <\/strong>ePub<\/strong><\/p>\r\n<\/td>\r\n<\/tr>\r\n

    \r\n

    <p><\/strong><\/p>\r\n

    <h1>\u2026<h6><\/strong><\/p>\r\n

    <img><\/strong><\/p>\r\n

    <figcaption><\/strong><\/p>\r\n<\/td>\r\n

    		\r\n

    paragraph<\/p>\r\n

    heading 1 (largest) to heading 6 (smallest)<\/p>\r\n

    image, e.g., <img src=\"imagename.jpg\" \/><\/p>\r\n

    caption<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
    \r\n

    HTML Identifiers for CSS Styling<\/strong><\/p>\r\n<\/td>\r\n<\/tr>\r\n

    \r\n

    Identifier<\/strong><\/p>\r\n<\/td>\r\n

    		\r\n

    Example in HTML<\/strong><\/p>\r\n<\/td>\r\n

    		\r\n

    Selector in CSS<\/strong><\/p>\r\n<\/td>\r\n<\/tr>\r\n

    \r\n

    tag, e.g., <p><\/strong><\/p>\r\n<\/td>\r\n

    		\r\n

    <p><\/p>\r\n<\/td>\r\n

    		\r\n

    p<\/p>\r\n<\/td>\r\n<\/tr>\r\n

    \r\n

    ID<\/strong><\/p>\r\n<\/td>\r\n

    		\r\n

    <p id=\"first-para\"><\/p>\r\n<\/td>\r\n

    		\r\n

    #first-para<\/p>\r\n<\/td>\r\n<\/tr>\r\n

    \r\n

    class<\/strong><\/p>\r\n<\/td>\r\n

    		\r\n

    <img class=\"body-fig\"><\/p>\r\n<\/td>\r\n

    		\r\n

    .body-fig<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n\r\n\r\n\r\n\r\n
    \r\n

    Styles for Text and Images<\/strong><\/p>\r\n<\/td>\r\n<\/tr>\r\n

    \r\n

    text<\/em><\/p>\r\n<\/td>\r\n

    		\r\n

    image<\/em><\/p>\r\n<\/td>\r\n<\/tr>\r\n

    \r\n

    font-family:<\/p>\r\n

    font-size:<\/p>\r\n

    font-style:<\/p>\r\n

    font-weight:<\/p>\r\n

    line-height:<\/p>\r\n

    color:<\/p>\r\n<\/td>\r\n

    		\r\n

    width:<\/p>\r\n

    height:<\/p>\r\n

    float:<\/p>\r\n

    margin:<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

    Creative Styles<\/h2>\r\nLet's apply some creative styles to the web eBook.\r\n

    1. Decorative Title Font<\/h2>\r\nFind a decorative Truetype font on google.com\/fonts, such as the font \u201cRye\u201d in the screen capture. Add the .ttf file to the web page folder and bring it into the page by adding an @font-face rule to the <style> statement:\r\n
      @font-face {\r\n\r\n      font-family: Rye;\r\n\r\n      src: url(\"Rye-Regular.ttf\");\r\n\r\n      }<\/pre>\r\nIn the style sheet, specify the font for the <h1> tag:\r\n
      h1 {\r\n      font-family: Rye;\r\n     }<\/pre>\r\n
    2.\u00a0Drop Cap<\/h2>\r\nFor the drop cap, enclose the first letter in a <span> tag, then style the span so the letter is 3 times normal size (3em or 300%), float left, and put the required margin around it. You could also use a different font. If drop cap has too much space at the bottom, e.g., it\u2019s only 2 lines high but occupies 3 lines, you could move the third line up using negative margin.d\r\n
      span {\r\n     font-size: 3em;\r\n     float: left;\r\n     margin: 0 6px -3px 0;\r\n     }\r\n<\/pre>\r\n
    3.\u00a0Image with Text Wrap<\/h2>\r\nPlace the image of the whale caricature into the page using the <img> tag. Label the <img> tag with a class, like <img class=\"left-float\">, because you will want to style other images differently. Style the .left-float class to the width that you want and float: left;, then add margin to create space around the image. Other suitable image styles include border and box-shadow (the box-shadow style will be deleted if used in Pressbooks).\r\n
      .left-float {\r\n     width: 512px;\r\n     float: left;\r\n     margin: 0 12px 6px 0;\r\n     border: 1px solid dimgray;\r\n     box-shadow: 3px 2px 6px gray;\r\n     }<\/pre>\r\n
    4.\u00a0Full-Width Image<\/h2>\r\nPlace the drawing of the whale into one column. Set width to occupy the whole column. You can also add a border and a drop shadow (text-shadow) to the image.\r\n
    5. Callout or Pull Quote<\/h2>\r\nA callout or pull quote is a sentence or phrase from the text that's set in larger type. It breaks up the text and calls attention to phrase in question. To create a callout, enclose the text in <span> or <div> tags, or in a <p> paragraph with a unique ID or class, set to the width of the column, and specify font-family and font-size. Use margin and padding to make space around and text inset.\r\n\r\nIn the sample callout and sidebars shown in the Moby Dick web-based eBook, the columns are 396px wide so the callout and sidebar paragraphs were set to 324px. The paragraph was centered in the column with the style \"margin: 0 auto;\" and font size, background, and border were also specified.\r\n
    6. Sidebar<\/h2>\r\nA sidebar presents short information that's an aside to the main story. It also breaks up the text and adds interest. Set up similar to a callout or pull quote.\r\n\r\n\r\n\r\n
    \"\"<\/a><\/td>\r\n\"\"<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
    Example of a 2-page web-based eBook<\/a> with special effects.<\/p>\r\n \r\n\r\n[caption id=\"attachment_416\" align=\"aligncenter\" width=\"1024\"]\"\"<\/a> Page structure of the web-based eBook, showing the div element \"page\" that creates the page and the div element \"text\" for the text.[\/caption]\r\n\r\n \r\n\r\n[caption id=\"attachment_414\" align=\"aligncenter\" width=\"1024\"]\"\"<\/a> XHTML tags and CSS code for the drop-cap, callout, full-width image, and image with text wrap.[\/caption]\r\n\r\n \r\n\r\n[caption id=\"attachment_415\" align=\"aligncenter\" width=\"1024\"]\"\"<\/a> Page 2 of the web eBook with code for the sidebar.[\/caption]\r\n\r\n \r\n
    Instructional Video<\/h2>\r\n[embed]https:\/\/youtu.be\/7r6AjDTxXSk[\/embed]","rendered":"
    A manually-created, web-based eBook may be a good solution for short books of, say, 6 pages or less. We will be using this web eBook to demonstrate HTML tags and CSS styles that are useful for creating special effects when editing the XHTML in eBooks.<\/p>\n
    Orientation to the Web Page<\/h2>\n
      \n
    1. Open Dreamweaver or a free HTML editor, then open the HTML file for the web eBook. Note how the page has been designed with a fixed layout that looks like an 8.5×11″ page.<\/li>\n
    2. If you’re new to HTML, note the use of the tags to mark all the sections and text, including <p> paragraph, <h1> to <h6> headings, <img> image, and <div> division for objects and grouping other tags.<\/li>\n
    3. Also note the <style> tag in the <head> of the document and how it is used to select specific tags and apply specific styles. Tags can be selected by their tag type or by labeling them with an ID (used once per page) or class (used multiple times in a page).<\/li>\n<\/ol>\n\n\n\n\n
      \n
      HTML <\/strong>T<\/strong>ags for <\/strong>ePub<\/strong><\/p>\n<\/td>\n<\/tr>\n
      \n
      <p><\/strong><\/p>\n
      <h1>\u2026<h6><\/strong><\/p>\n
      <img><\/strong><\/p>\n
      <figcaption><\/strong><\/p>\n<\/td>\n
      		\n
      paragraph<\/p>\n
      heading 1 (largest) to heading 6 (smallest)<\/p>\n
      image, e.g., <img src=”imagename.jpg” \/><\/p>\n
      caption<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n\n\n
      \n
      HTML Identifiers for CSS Styling<\/strong><\/p>\n<\/td>\n<\/tr>\n
      \n
      Identifier<\/strong><\/p>\n<\/td>\n
      		\n
      Example in HTML<\/strong><\/p>\n<\/td>\n
      		\n
      Selector in CSS<\/strong><\/p>\n<\/td>\n<\/tr>\n
      \n
      tag, e.g., <p><\/strong><\/p>\n<\/td>\n
      		\n
      <p><\/p>\n<\/td>\n
      		\n
      p<\/p>\n<\/td>\n<\/tr>\n
      \n
      ID<\/strong><\/p>\n<\/td>\n
      		\n
      <p id=”first-para”><\/p>\n<\/td>\n
      		\n
      #first-para<\/p>\n<\/td>\n<\/tr>\n
      \n
      class<\/strong><\/p>\n<\/td>\n
      		\n
      <img class=”body-fig”><\/p>\n<\/td>\n
      		\n
      .body-fig<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n
      \n
      Styles for Text and Images<\/strong><\/p>\n<\/td>\n<\/tr>\n
      \n
      text<\/em><\/p>\n<\/td>\n
      		\n
      image<\/em><\/p>\n<\/td>\n<\/tr>\n
      \n
      font-family:<\/p>\n
      font-size:<\/p>\n
      font-style:<\/p>\n
      font-weight:<\/p>\n
      line-height:<\/p>\n
      color:<\/p>\n<\/td>\n
      		\n
      width:<\/p>\n
      height:<\/p>\n
      float:<\/p>\n
      margin:<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Creative Styles<\/h2>\n
      Let’s apply some creative styles to the web eBook.<\/p>\n
      1. Decorative Title Font<\/h2>\n
      Find a decorative Truetype font on google.com\/fonts, such as the font \u201cRye\u201d in the screen capture. Add the .ttf file to the web page folder and bring it into the page by adding an @font-face rule to the <style> statement:<\/p>\n
        @font-face {\r\n\r\n      font-family: Rye;\r\n\r\n      src: url(\"Rye-Regular.ttf\");\r\n\r\n      }<\/pre>\n
      In the style sheet, specify the font for the <h1> tag:<\/p>\n
        h1 {\r\n      font-family: Rye;\r\n     }<\/pre>\n
      2.\u00a0Drop Cap<\/h2>\n
      For the drop cap, enclose the first letter in a <span> tag, then style the span so the letter is 3 times normal size (3em or 300%), float left, and put the required margin around it. You could also use a different font. If drop cap has too much space at the bottom, e.g., it\u2019s only 2 lines high but occupies 3 lines, you could move the third line up using negative margin.d<\/p>\n
        span {\r\n     font-size: 3em;\r\n     float: left;\r\n     margin: 0 6px -3px 0;\r\n     }\r\n<\/pre>\n
      3.\u00a0Image with Text Wrap<\/h2>\n
      Place the image of the whale caricature into the page using the <img> tag. Label the <img> tag with a class, like <img class=”left-float”>, because you will want to style other images differently. Style the .left-float class to the width that you want and float: left;, then add margin to create space around the image. Other suitable image styles include border and box-shadow (the box-shadow style will be deleted if used in Pressbooks).<\/p>\n
        .left-float {\r\n     width: 512px;\r\n     float: left;\r\n     margin: 0 12px 6px 0;\r\n     border: 1px solid dimgray;\r\n     box-shadow: 3px 2px 6px gray;\r\n     }<\/pre>\n
      4.\u00a0Full-Width Image<\/h2>\n
      Place the drawing of the whale into one column. Set width to occupy the whole column. You can also add a border and a drop shadow (text-shadow) to the image.<\/p>\n
      5. Callout or Pull Quote<\/h2>\n
      A callout or pull quote is a sentence or phrase from the text that’s set in larger type. It breaks up the text and calls attention to phrase in question. To create a callout, enclose the text in <span> or <div> tags, or in a <p> paragraph with a unique ID or class, set to the width of the column, and specify font-family and font-size. Use margin and padding to make space around and text inset.<\/p>\n
      In the sample callout and sidebars shown in the Moby Dick web-based eBook, the columns are 396px wide so the callout and sidebar paragraphs were set to 324px. The paragraph was centered in the column with the style “margin: 0 auto;” and font size, background, and border were also specified.<\/p>\n
      6. Sidebar<\/h2>\n
      A sidebar presents short information that’s an aside to the main story. It also breaks up the text and adds interest. Set up similar to a callout or pull quote.<\/p>\n\n\n\n
      \"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Example of a 2-page web-based eBook<\/a> with special effects.<\/p>\n
       <\/p>\n
      \"\"<\/a>
      Page structure of the web-based eBook, showing the div element “page” that creates the page and the div element “text” for the text.<\/figcaption><\/figure>\n
       <\/p>\n
      \"\"<\/a>
      XHTML tags and CSS code for the drop-cap, callout, full-width image, and image with text wrap.<\/figcaption><\/figure>\n
       <\/p>\n
      \"\"<\/a>
      Page 2 of the web eBook with code for the sidebar.<\/figcaption><\/figure>\n
       <\/p>\n
      Instructional Video<\/h2>\n